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: stackoverflow.com/questions/256195/… — Dan Herbert
– Dan Herbert, Commented Jan 30, 2011 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
– stephen776, Commented Jan 30, 2011 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
– stephen776, Commented Jan 30, 2011 at 19:09

oryol · Accepted Answer · 2011-01-30 21:23:25Z

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, 2011 at 21:23

answered Jan 30, 2011 at 19:08

oryol

5,2582 gold badges25 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

stephen776 Over a year ago

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

oryol Over a year ago

ok, it doesn't work even if you do empty AJAX call ($.get('/'))?

oryol Over a year ago

so.. what are your calls doing (after which dialog doesn't work)? could you please post JS code and appropriate markup?

stephen776 Over a year ago

Code posted...I appreciate your help

stephen776 Over a year ago

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?

|

bipen · Accepted Answer · 2012-11-06 09:32:00Z

0

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.

edited Nov 6, 2012 at 9:32

bipen

36.6k9 gold badges51 silver badges62 bronze badges

answered Nov 21, 2011 at 6:45

Mwangi Ikonye

11 bronze badge

1 Comment

dove Over a year ago

it will help you answer if you break out your answer into paragraphs and make it more readable.

Collectives™ on Stack Overflow

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

2 Answers 2

8 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related