Question

我在模态模式模式下使用jQuery-UI对话框在我的页面上显示多个“编辑”表单。

截至目前，编辑表单已加载到对话框div和ajax调用中。所述表格也通过ajax提交。 submit ajax函数调用另一个函数，该函数使用新编辑的数据更新主页面的DOM。

我的问题是在任何DOM更新后我都失去了对UI对话框的引用。那么问题是我不能再在对话框上调用方法（I.E.'close'）。

如果我重新初始化对话框，我遇到一个问题，我通过ajax提交的表单会多次调用它...就像表单多次绑定到对话框一样。

有没有办法绕过这种行为并在DOM更新后维护对话框的引用？

以下是一些代码...... 初始化文档就绪的对话框...

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

单击

按钮打开对话框并加载编辑表单...

('#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;
 });

提交表单后，成功调用此函数以更新dom和主页...

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

在调用之后DOM会更新，但对话框不关闭...

修改我应该提一下，我使用的是asp.net MVC 3.加载到对话框中的编辑表单是局部视图，提交后在主页面上更新的元素也是局部视图。不确定是否这很重要

编辑2 找到了一个解决方案。作为答案但有新问题（参见下面的答案）

Answer 1

我已经通过初始化ajax调用

的成功函数中的模态对话框来解决这个问题

('#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;

}）;

这允许在提交回调触发时关闭对话框，这解决了我在问题中提出的问题。但是，我遇到的问题是多次提交表单并且多次打开模式.... I.E。每次打开/加载对话框时，表单都会提交一次。尽管我明确地破坏了表单回调中的对话框，但仍会发生这种情况。我可能需要为这个问题打开一个新问题，除非有人快速修复......

表单提交回调...

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

DOM更新后，jQuery-UI对话框中断

1 个答案: