Question

I am using jQuery-UI dialog in modal modal mode to display several “Edit” forms on my page.

As of now the edit forms are loaded into the dialog div via and ajax call. Said forms are also submitted via ajax. The submit ajax function calls back to another function which updates the DOM of the main page with the new edited data.

My problem is that I lose the reference to the UI dialog after either of the DOM updates. The problem, then, is that I can no longer call methods on the the dialog (I.E. ‘close’).

If I reinitialize the dialog, I run into a problem where my form submitted via ajax makes all of its calls multiple times…as if the form is bound multiple times to the dialog.

Is there a way to get around this behavior and maintain my reference to the dialog after DOM updates?

Heres some code…
initialize the dialog on document ready…

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

button click to open the dialog and load the edit form…

('#editInfo').live("click", function () {
     $('#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 the forms is submitted this function gets called on success to update dom and main page…

function infoUpdate(response) {
   $('#dialog').dialog('close');
   $('#info').html(response);
 } 

DOM gets updated fine after that call but the dialog does not close…

EDIT:
I should mention that I am using asp.net MVC 3. The edit form that is loaded into the dialog is a partial view, and the elements that get updated on the main page after the submit are also a partial view..not sure if this matters

EDIT 2
found a solution..posted as answer but having new issue(refer to answer below)

Answer 1

I have fixed this by initializing the modal dialog inside the success function of the ajax call

('#editInfo').live("click", function () {
   $('#dialog').dialog('open')
   $.ajax({
      type: 'GET',
      url: '../info/edit',
      data: {},
      success: function (response) {
         $('#dialog').html(response);
         $('#dialog').dialog({         
             autoOpen: true,         
             modal: true, 
             draggable: false, 
             resizable: false, 
             height: 450,
             width: 550,
         });

      }
 });
 return false;

});

This allows the dialog to close when the submit callback fires which solves the problem I posed in my question. However, I am having issues with the form being submit multiple times in conjunction with the modal being opened multiple times….I.E. the form is submitted once for each time the dialog has been opened/loaded. This happens in spite of me explicity destroying the dialog within the form callback. I may need to open a new question for this issue unless someone has a quick fix…

form submit callback…

function infoUpdate(response) {
    $('#dialog').dialog('destroy');
    $('#info').html(response);
}