I'm trying to render images and each images should be clickable. I tried to write a code below. However, the click events fires when a user access to the component. Can you explain why is it happening?
the code that I wrote is here
When I use a callback function, it worked out!
events={{click: () => this.props.addToCart(item.product_id)}}
Related
I am trying to wrap FullCalendar React component with my own functional React component with useContext hook to access MobX store (I might use the store in other components eventually) and observer() to make it react to changes in the store. My component reacts as I would expect, but I have trouble making the FullCalendar component render after a change.
I've tried finding a solution, wrapping <FullCalendar> in <Observer>, playing with autorun() and reaction() but nothing worked. I have to be missing something
This sandbox https://codesandbox.io/s/mobx-fullcalendar-xejn9 shows a simplified version of my solution so far.
Clicking the button at the top adds an event to the observable store, which gets shown in a list below it. But the calendar doesn't show the new event.
Weirdly enough if I make a change in the code, save it, the CodeSandbox causes the render and the events show up in the calendar.
Thanks to #ADyson, I found a solution. Instead of passing a static list of events to the FullCalendar component
events={store.events}
I can pass an event fetching function. So in the most trivial case, I can just pass the events from the store to the successCallback function and it works.
events={(fetchInfo, successCallback, failureCallback) => {
successCallback(store.events);
}}
I've updated the CodeSandbox https://codesandbox.io/s/mobx-fullcalendar-xejn9 as well.
I'm creating a POC using google app maker. I plan on using a JS library that has a dependency on Jquery. I've listed JQuery as an "external resource" to start with and added an H1 element on my html with the following code as part of a client script:
$(document).ready(function(){
$("h1").click(function(){
console.log("jquery works");
});
});
When I preview my app and click on the element, nothing is logged. When I inspect the elements, I can see both the Jquery library and the code above, but the event is not triggering when I click on the element. Any suggestions? The ultimate goal is to be able to use https://querybuilder.js.org/ within the app I'm creating.
My best guess is that when you say that you added the code:
$(document).ready(function(){
$("h1").click(function(){
console.log("jquery works");
});
});
to the client script, what you did was created a client script under the SCRIPTS section of App Maker and then added the code there. If that is so, that is why it's not working.
What you need to do is to use client scripting in the widget event handlers. Each widget has event handlers and the HTML widget is not an exception. What I recommend is to add the code to the onAttach event handler of the HTML widget:
}
Also, you can get rid of the document.ready part and just use the code you see in the image above. That should do the trick.
BONUS: If you will be using classes and ids, for it to work you will need to use the allowUnsafeHtml option:
I hope this helps for now. If you need something else, I'll be happy to help you.
Im trying to implement delete button in GRID, same as with CRUD. I found dialogOK (http://agiletoolkit.org/blog/introduction-to-dialog-integration/), but guess i don't know how to use it right.
My code:
$gridC=$this->add('Grid');
$gridC->setModel('Campaign');
$gridC->addcolumn('Button', 'Delete')->js('click', $this->js()->univ()->dialogOK('Yey','Some custom javascript action here',$this->delete()));
//test only
$gridC->addcolumn('Button', 'Deletex')->js('click')->univ()->dialogOK('Are you sure?','This will take you to other page',$this->js()->univ()->page($this->api->getDestinationURL('admin')));
...
function delete(){
...
}
When i click on the button the delete() function starts right away, before i click ok. Also modal window is started :(
Any suggestions, i searched but couldn't find any good example..
NEXT DAY:
I checked the thing again, im almost shure i did it the right way, but i think i found a bug i dialogOK (http://agiletoolkit.org/blog/introduction-to-dialog-integration/)
I i re-create this example on any normal page:
$button = $this->add('Button');
$button->js('click')->univ()->dialogOK('Are you sure?','This will take you to other page',
$button->js()->univ()->page($this->api->getDestinationURL('index'))
);
The page redirects to index page, it doen't wait for OK button clicked. Insted it opens the dialogOK, but in the background redirects to index page..
I'm using atk 4.2.5 from master branch..
OK, that webpage has some bugs :( I would really appreciate if you could edit it and send in pull request in Github atk4-web.
Some tips to get you on road:
Try to use dialogConfirm() method not dialogOK(). Is it working then?
Try to add ->_enclose() after ->page(). That'll enclose JS expression in function.
If dialogConfirm() works and similar dialogOK() does not work, then I guess there is small bug in dialogOK() method. There should be close: if(fn)fn(), instead of close: fn, in atk4_univ.js file dialogOK method.
Can you try these tips and tell me what works for you? Sorry I didn't do that myself - I'm really out of time now :(
I want the fullCalendar to redraw itself (all the structure and events) without reloading the page.
Scenario:
I am using a patch of fullCalendar that supports the Resource View. For a few user actions I want to change the resources. But I don't want to reload the page.
You could 'destroy' and 'render' the calendar as a whole. But that might be cumbersome - especially in older browsers.
$('#calendar').fullCalendar('destroy');
$('#calendar').fullCalendar('render');
If you don't actually need to render the table, but just rerender the events again, you could use the 'rerenderEvents' method:
$('#calendar').fullCalendar('rerenderEvents');
Hopefully this helps!
Use refetchResources: .fullCalendar( 'refetchResources' )
This will fetch and freshly re-render the resource data, per the FullCalendar documentation.
The problem:
"...The problem is that the calendar is initialized while the modal or div is not visible... " based on this link enter link description here
In my opinion, destroy is not needed in this case, only with render you can see the calendar.
My solution:
<script type="text/javascript">
$('#objectname').show(0,onObjectShow);
function onObjectShow(){$('#calendar').fullCalendar('render');}
</script>
You must to be sure that the object(container of calendar) is fully visible. For example, my first mistake was to put this code on "onClick" event, and click event is triggered before show the object container and has no effect.
Solution Based on this reference.
You can also redraw calendar on the fly using below command-
$(window).trigger("resize");
I want to add click event handler to a wxStaticBitmap component.
I use the following statement to create a dynamic event handler:
Connect(ID_STATICBITMAP1,wxEVT_COMMAND_BUTTON_CLICKED,(wxObjectEventFunction)&MyFrame::OnStaticBitmap1Click);
In OnStaticBitmap1Click(), I just want include the following function call:
wxMessageBox(_T("Hello World"));
However, obviously, my code doesn't work. When I click on the static bitmap, nothing happens.
Can anyone tell me why? Any advice would be appreciated.
A wxBitmapButton issues an wxEVT_COMMAND_BUTTON_CLICKED event.
A wxStaticBitmap does not.