Ajax refresh messes up jqModal functionality

Question

I am trying to use jqModal in my .net/mvc app to do simple jquery modal popups. I have a table where I list out records and have an "edit" button to popup a modal dialog to do the edits. When I submit, I hide the modal popup and refresh the table listing below using the .ajax() method.

However, now when I click on the "edit" page, jqModal isn't firing and instead it just goes to my edit page directly (rather than the modal popup).

I've tried to re-inject the jqModal scripts after the ajax callback but that doesn't work either. Any help appreciated!!!

$.ajax(
{
    type: "GET",
    url: "HomePage/ViewTimelineFeatures",
    dataType: "html",
    success: function(result) {
            $("myDiv").html(result);
            // Now re-initialize jqModals here doesn't work...
        }
     });

Answer 1

You have to add in the triggers again after updating the html. I had this exact same problem.

WHen you call $("#blah").jqmodal... it sets up the trigger on the .jqmodal class to load your content in the modal. I'm assuming you're loading these with ajax? So something like:

$("#someDiv").jqModal({ajax:'@href'});

I'm a bit confused by your above ajax code, is this doing a save of the item you've edited? This wouldn't normally be a get, but a put. Anyway, it looks like you render out the table with the updated data and replace the existing one. After

$("myDiv").html(result);

You need

$("#someDiv").jqmAddTrigger(".jqModal");

To add the triggers again on your edit links (assuming you used .jqModal in the first place) If you want to paste in some html/ajax code I can verify this.