JQuery对话框:如何进行部分页面刷新并每次都获得新的对话框

Question

在尝试创建对话框然后进行部分页面渲染时,我的JQuery对话框出现了工作流问题.我将尝试通过一个示例场景,并提前为长期问题描述道歉:

页面加载,我希望将html转换为JQuery对话框.对话框在document.ready(using .dialog())上创建,但autoOpen属性设置为false.当JQuery创建对话框时(如果我使用Firebug来检查页面),对话框html实际上是从它的正常位置剥离并停留在文档的最末端,周围有一些包装类.用户通过单击刚才执行的链接打开对话框$dialogDiv.dialog('open').

所以一切正常.问题是我有时会使用AJAX(使用ASP.NET MVC RenderPartial)进行部分页面重新加载.我正在刷新的页面部分恰好包含了所有的对话框html,因此会重新写出来.但请记住,对话框(包含所有JQuery包装类等)已经存在于文档的底部.那个html不是页面刷新的一部分,所以现在我坚持使用两组对话框html.这给了我各种各样的问题,因为我在页面上有重复的id,并且这些html元素上的jQuery行为变得不可预测.当我开始进行3,4,5个部分页面刷新时,情况更糟,因为那时我有3组,4组,5组对话框html(在document.ready上只有一个真正的对话框).

我想我可能需要在某些时候破坏对话框或某些东西,但我对这种方法没有任何好运.有没有人有任何想法？

非常感谢.

Answer 1

根据文档销毁一个对话框删除对话框功能并将其恢复到它的pre-init状态,但不会将其从DOM中删除.

由于您要替换内容和对话框,因此您可以删除旧内容.

$.ajax({
  url: '/some/url/',
  success:function(data){
    $('.ui-dialog').empty().remove();
    //add the new html and make the dialogs
  }
});

在回应你的评论

我没有看到你的代码,所以我不确定你是如何设置对话框的,但是从一般意义上讲,我只使用将要替换的对话框来填充变量.

//inside document.ready
  var myDialog=$('#myDialog').dialog(),
  myOtherDialog=$('#myOtherDialog').dialog(),
  permanentDialog=$('#permanentDialog').dialog(),
  destroyableDialogs=[myDialog, myOtherDialog];

//ajax callback
success: function(data){
  $.each(destroyableDialogs, function(i,n){
    n.empty().remove();
  });
}