jquery ui：无法在初始化之前调用对话框上的方法；试图调用方法“关闭”答案

【问题标题】：jquery ui: cannot call methods on dialog prior to initialization; attempted to call method 'close'jquery ui：无法在初始化之前调用对话框上的方法；试图调用方法“关闭”
【发布时间】：2013-03-08 06:31:01
【问题描述】：

我正在使用jquery ui 对话框，我从jquery ui 网站下载它，版本是jquery-ui-1.10.2.custom.min.js，jquery 是jquery-1.9.1.js，它与jquery ui 捆绑在一起js，但现在我遇到一个问题：当打开对话框并单击保存按钮时，我希望关闭对话框，这是我的代码：

$(function(){
 $("#dialog-form").dialog({
     autoOpen: false,
     height: 350,
     width: 450,
     modal: true,
     buttons: {
       "save": function() {
           if(!checkDept()){
               return ;
           }
           $.post('dept_save.do', 
                 {'dept.deptId':$("#dialog_dept_deptId").val(), 
                  'dept.deptName':$("#dialog_dept_deptName").val(),
                  'dept.manager':$("#dialog_dept_manager").val(),
                 },function(data, status, xhr){
                     if(status == 'success'){
                         alert('save success');
                         $(this).dialog("close");
                     }else{
                         alert('error:'+data);
                     }
                  }
                 ,"json");
       }
     },
     close: function() {
         $(this).dialog("close");
     }
   });

     /* to open dialog*/
    $("#add").click(function(){
        $("#dialog-form").dialog("open");
    });

现在当我关闭“保存成功”弹出对话框时，dialog-form 对话框没有关闭，并且出现错误：

未捕获的错误：无法在初始化之前调用对话框上的方法；试图调用方法'close' jquery-1.9.1.js:507。

还有一个错误：

Uncaught SyntaxError: Unexpected token o jquery-1.9.1.js:541

谢谢。

【问题讨论】：

对不起，我知道为什么错了，匿名成功函数中的$(this)没有引用对话框，改成$("#dialog-form")就可以了。

标签： jquery jquery-ui

【解决方案1】：

一旦您进入$.post()，您将失去this 的上下文。在您的 $.post 之前，将上下文 this 保存在该 save 按钮函数内的变量中。

$('#dialog-form').dialog({
     // .....
     buttons: {
        'save': function() { 

            var $this = $(this); 
                      // -this- is still the original context 
                      // of $("#dialog-form")

            $.post({
               /// ...
               $this.dialog('close'); // <-- used here
            });
        }       
    }
});

【讨论】：

使用 ajax 调用而不是帖子也是如此。
有解决问题的替代方法。请看下面我的回答。
@JotaBe 但是 OP 并没有询问如何获取新的内容 div，他试图在 ajax 范围内关闭对话框本身，他只是指向错误的this。

【解决方案2】：

当您通过调用.dialog(options) 方法初始化对话框时，会创建一个新对话框，但它与您要转换为对话框的原始 div 无关（示例代码中的“#dialog-form”） . dialog(options) 函数返回包含对话数据的元素。所以，如果你这样做：

var myDialog = $("#dialog-form").dialog(options);

然后你可以像这样调用 open 方法：

myDialog.dialog('open');

如果你想找到包含对话框的元素，它是最接近“ui-dialog-content”类的div：

var myDialog = $('#dialog-form').closest('div.ui-dialog-content');

对话框数据是uiDialog 数据，如果您查看此元素数据，您会看到：

myDialog.data();

【讨论】：

拯救了这一天！我试图在回发后调用具有此代码的 JS 函数，这成功了！

【解决方案3】：

$(this) 不是针对$.post 内部的对话框，您需要存储对它的引用。

var self = this; // add this
$.post(..., function(){
    $(self).dialog("close"); // modify this to use self

【讨论】：

【解决方案4】：

我必须执行以下操作才能关闭我的对话框。

 $("#Note").dialog({
        autoOpen: true,            
        modal: true,
        create: function (e, ui) {
          //
        },
        open: function () {
            //
        },            
        buttons: {
                //
                $(".ui-dialog-titlebar-close").trigger('click');
            }
        }
    });

【讨论】：

【解决方案5】：

可能导致此错误的另一件事是，如果出于任何原因在对话框中调用 removeData()。显然 jquery data() 函数用于初始化对话框，因此如果出于任何原因删除数据，对话框将不会认为它已被初始化。

当我使用 data() 函数将表单数据存储在对话框对象中，然后在关闭对话框之前调用 removeData() 时，我发现了这一点。

【讨论】：

【解决方案6】：

您可能使用了弹出窗口而不是对话框。我认为关闭两者的方法是不同的。尝试使用$("#popid").popup('close');

【讨论】：