fnReloadAjax - assigning event handlers after reload

fnReloadAjax - assigning event handlers after reload

neburtonneburton Posts: 63Questions: 6Answers: 0
edited July 2009 in General
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.

Replies

  • allanallan Posts: 62,448Questions: 1Answers: 10,251 Site admin
    Hi neburton,

    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
  • neburtonneburton Posts: 63Questions: 6Answers: 0
    Hi Allan, thanks for the info. I tried to assign the event handler after the fnDraw() in the fnReloadAjax function as suggested, but it has does not work. Please see below where I have added the jqmodal code to open a modal window. It's the same code I use in the fnInitComplete and It works ok when the table is created first. On reload it does not.

    [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
  • allanallan Posts: 62,448Questions: 1Answers: 10,251 Site admin
    Hi neburton,

    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
  • neburtonneburton Posts: 63Questions: 6Answers: 0
    I've tried Visual Event and there are no handlers applied to the link after a datatable reload. If you refresh the whole page they are there but after reload not. The links are in the json that is loaded via ajax to the table and that json stays the same, so all the ids and classes should be correct. It can't see why it shouldn't work. As a test I've even added a button that should apply the jqmodal event handler to the link in the datatable and even that doesn't work. I've tried this in different browsers in case it was an IE funny and it does not work in FF either. Unfortunately I can't expose the site for you to see as it's an intranet. Hair pulling out time!
  • neburtonneburton Posts: 63Questions: 6Answers: 0
    To add to the above, I've applied a click event handler to another link in the table that performs a delete function using live instead of bind, and that works fine after reload, although live handlers don't show up in Visual Event.
  • allanallan Posts: 62,448Questions: 1Answers: 10,251 Site admin
    I'm working on a new version of Visual Event which will show the $.live events :-) Hopefully out sometime this week...

    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
  • neburtonneburton Posts: 63Questions: 6Answers: 0
    edited August 2009
    Hi again, unfortunately I am still not getting anywhere with this problem.

    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!
  • allanallan Posts: 62,448Questions: 1Answers: 10,251 Site admin
    Hello,

    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
  • neburtonneburton Posts: 63Questions: 6Answers: 0
    Hi, I've determined this problem is nothing to do with datatables.

    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.
  • allanallan Posts: 62,448Questions: 1Answers: 10,251 Site admin
    Hi,

    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
This discussion has been closed.