fnReloadAjax - assigning event handlers after reload
fnReloadAjax - assigning event handlers after reload
I've got 2 links in my datatable results and have bound a jqmodal window to one and a standard click handler to another using fnInitComplete. When I use fnreloadajax I lose the event handlers. Is there an easy way to reapply? I've heard about using live event handler, but that's no good for jqmodal. Any suggestions would be appreciated.
This discussion has been closed.
Replies
What you need to do is apply the event handlers again after fnReloadAjax has completed - see this thread: http://datatables.net/forums/comments.php?DiscussionID=433 . I'm going to modify the fnReloadAjax code to allow a callback on complete as well...
Regards,
Allan
[code]
.fn.dataTableExt.oApi.fnReloadAjax = function ( oSettings, sNewSource )
{
if ( typeof sNewSource != 'undefined' )
{
oSettings.sAjaxSource = sNewSource;
}
this.fnClearTable( this );
this.oApi._fnProcessingDisplay( oSettings, true );
var that = this;
$.getJSON( oSettings.sAjaxSource, null, function(json) {
/* Got the data - add it to the table */
for ( var i=0 ; i
I don't see anything wrong with that immediately... You are adding the events again, after the draw, so they should be assigned to the required nodes. I assume that #editnote and .editnotetrigger are still defined on the page? You might want to try Visual Event ( http://www.sprymedia.co.uk/article/Visual+Event ) which shows which elements have events handlers assigned to them.
Do you perhaps have a link you can share which shows this behaviour?
Thanks,
Allan
Regarding the problem with jqm - I'm at a little bit of a loss... I'd suggest adding debug code to ensure that it is correctly picking up #editnote and whatever else it needs to add in. Is edit node in the table? It's worth noting that events will only be applied to the first 10 elements in the table with that method (assuming it looks for TR/TD elements somewhere). See: http://datatables.net/examples/example_events_post_init.html
Regards,
Allan
It's been a while, so to remind you of the problem.... I have a datatable loaded with data via ajax from a json generating script. Within the resultant table are fields containing data and also a field with 2 links. One link deletes the line and one allows you to edit.
I use the fnInitComplete function of datatables to bind a jqmodal dialog opening click handler to that edit link, and a standard event handler to the delete link.
When the page first loads and the table is first populated, the handlers are applied correctly, the edit dialog pops up when the edit link is pressed, I can edit the data and save it. The delete link simply does an ajax post to delete the data from the database and both these activities result in a fnReload being called and the event handlers reapplied.
Above the table I also have an Add button, which is bound through jqmodal to open a dialog allowing me to add new data. Once this data is submitted through ajax, the fnReload function is called also and the delete and edit handlers applied.
Now, if I add, edit or delete data, and the fnReload is called to reapply event handlers, the jqmodal handler does not function any more. The delete works fine though, as that uses a standard click handler.
As an experiment, I removed the code from the fnInitComplete function that applies the event handlers, and pressed the ADD button to create new data, the jqmodal handler IS now applied to the edit link through the reload code, but if I do another ADD the handler fails to apply.
It seems that there's a problem with the way jqModal applies event handlers. As an experiment, I created a button that applied the jqmodal click handler and another button that did a standard jquery unbind on the same link. When the table loaded, I clicked the button to bind the jqmodal click handler, and using visual event, I could see the handler applied. Clicking the unbind button and I could see the click handler was gone. When I clicked bind again, it wouldn't reapply the click handler.
Does this scenario make sense and do you have any further ideas?
jqmodal is applied in the fnInitComplete function like this:
[code]
$('#editnote').jqm({ajax: '@rel', trigger: '.editnotetrigger'});
[/code]
The dialog window is in the main html code like this:
[code]
[/code]
The datatable has a link that looks like this:
[code]
[/code]
Many thanks for you assistance on this matter so far!
Have you tried using the fnDrawCallback() function rather than fnInitComplete()? http://datatables.net/usage/callbacks#fnDrawCallback
fnDrawCallback() is called on each draw of the table - which is probably what you need if you are using server-side processing - since you aren't actually reinitialising the whole table. fnInitComplete() however, is only called once during the whole life time of the table - which would explain why you are only seeing the events being added once.
Regards,
Allan
It seems you cannot assign jqmodal to trigger on dynamically added links. I've been adding new rows to the datatable using the fnReload function and have been trying to bind jqmodal to trigger on links in the new content.
Obviously this is now out of the scope of this forum, but if anyone is curious, I've demonstrated the problem at the following URL: http://www.neil-burton.co.uk/jqmodaltest/index.htm
jqModal plugin here - http://dev.iceburg.net/jquery/jqModal/
Thanks for your help with this matter.
Phew - good to hear ;-)
Thanks very much for the update on this. Odd that you can't add jqModal to dynamically added links! But one for the jQuery UI team to figure out :-)
Regards,
Allan