asp.net MVC- How to get jQuery working after ajax calls

Question

Ok getting my feet wet with mvc. I am trying to build a user profile type page. The page is made up of several sections, each loaded via a partial view.

I want to be able to edit each section individually inside of an jQuery-UI modal dialog. I have this all working properly(incduding loading the Edit views via ajax into the modal and submitting the changes.)

My problem is that after any ajax call my jQuery-UI dialogs stop working so I am unable to close or open a dialog.

I can, of course, fix things like button clicsk with the .live method but I cant figure out the best way to get the jQuery-UI items to continue working.

What is the best way to go about this? I guess I am confused as to what happens to previously loaded jQuery plugins after an ajax call. Should I be able to reference elements on my ajax loaded content from my main page?

EDIT: Ok...heres some code to show whats happening....

user click the edit button on the user info section

$('#editInfo').live("click", function () {
        dialogInit(450, 550, 'User Information');
        $('#dialog').dialog('open')
        $.ajax({
            type: 'GET',
            url: '../info/edit',
            data: {},
            success: function (response) {
                $('#dialog').html(response); //loads the partial edit view into the dialog div...works fine to here.

            }
        });
        return false;
    });

After this happens I have a modal on the screen with a save button. When the save button is clicked I post my ajax form which calls this JS function on success...

function infoUpdate(response) {
    dialogInit(450, 550, 'User Information');
    $('#dialog').dialog('close');
    $('#info').html(response);
}

This loads the new User info partial view into the appropriate div on the main page...works fine...

The problem here is that the dialog is not closed...so the reference to it seems to be lost even though I am reinitializing it with my dialogInit function...which looks like this...

function dialogInit(height, width, title) {
    $('#dialog').dialog({
        autoOpen: false,
        modal: true,
        draggable: false,
        resizable: false,
        height: height,
        width: width,
        title: title
    });
}

EDIT 2:

The above code also causes my ajax form to be posted multiple times...an additional time every time I click the submit button...not good

I can't answer your question specifically in relation to MVC, but it probably works the same way as ASP.NET WebForms AJAX calls. The AJAX panel gets completely replaced with new DOM elements, which is why the old events will no longer work. See: http://stackoverflow.com/questions/256195/jquery-document-ready-and-updatepanels/256253#256253 — Dan Herbert, Jan 30 '11 at 19:05
in this case, my partial view only replaces HTML inside of the dialog div so i dont see why I would lose the reference to the outer div on which the UI dialog widget is initialized — stephen776, Jan 30 '11 at 19:08
I am also planning on re-using one UI Dialog to display the edit forms for each section...would this be considered a best practice? — stephen776, Jan 30 '11 at 19:09

oryol · Accepted Answer · 2011-01-30T21:23:25.927

2

There are 3 possible ways to make dynamic generated content work as expected:

Attach event handlers to it after each regeneration (after AJAX or after after any other dynamic content changing).
.live
Optimized .live - .delegate (event will be actually attached to some container not to all document as in .live)

UPD: So, you're right you #dialog itself remains same. But all content inside it is replaced (with new HTML), so DOM elements (with attached event handler) for old buttons and so on won't exist after it.

edited Jan 30 '11 at 21:23

answered Jan 30 '11 at 19:08

oryol

5,178
2
23
18

in this case, my partial view only replaces HTML inside of the dialog div so i dont see why I would lose the reference to the outer div on which the UI dialog widget is initialized – stephen776 Jan 30 '11 at 19:10
ok, it doesn't work even if you do empty AJAX call ($.get('/'))? – oryol Jan 30 '11 at 19:15
so.. what are your calls doing (after which dialog doesn't work)? could you please post JS code and appropriate markup? – oryol Jan 30 '11 at 19:27
Code posted...I appreciate your help – stephen776 Jan 30 '11 at 19:40
I guess my question would be...How do i ensure that I can call methods on the UI dialog after the DOM update? Do I have to destroy and reinitialize? – stephen776 Jan 30 '11 at 22:18
If you update dialog buttons and so on - you have to reinitialize it. If you update something outside dialog, or just some text and so inside it (items which isn't stored by widget and which doesn't have attached event handlers) - then you don't need to reinit it. – oryol Jan 30 '11 at 22:22
thats what my initial assumption was...I dont understand why I am not able to close the dialog after the dom update(outside the dialog) though... – stephen776 Jan 30 '11 at 22:29
In your example, you're updating content **inside** dialog ($('#dialog').html(response)). It include DOM elements of close button and so on - they are all replaced with new content. – oryol Jan 31 '11 at 01:17

score 0 · Answer 2 · edited Nov 06 '12 at 09:32

I think I had the same problem as stephen776 and it has bothered me for a whole day.

After Ajax calls, all my dialog boxes seemed to be undefined and I was getting lots of $('example-dialog-box').dialog is not a function errors.

I use Kohana PHP MVC framework. After a lot of fruitless Googling, I decided to fire up the url called by Ajax on my browser to see what it was returning and this effectively solved my problem. I realized that the Ajax call response was working okay and had all the elements I desired. However, it also had the head tag and all its link and script tags, meaning that the browser was getting confused by the new jQuery script inclusions.

I made sure that the Ajax response only returns what I need, with no additional HTML and JavaScript, and this worked just fine for me. I realize that this can be a big headache for someone on an MVC framework, since several pages usually share HTML and when coding a method called by Ajax, you may take an already existing view and add the desired response to it. This view may already have the head tags that are common to most of your pages and this will cause your browser to exhibit very strange behavior.

it will help you answer if you break out your answer into paragraphs and make it more readable. — dove, Nov 06 '12 at 09:28

asp.net MVC- How to get jQuery working after ajax calls

2 Answers2