jquery ui:在初始化之前无法调用对话框上的方法; 试图调用方法'关闭'

Question

我正在使用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.

还有另一个错误:

未捕获的SyntaxError:意外的令牌o jquery-1.9.1.js:541

谢谢.

Answer 1

this一旦你进入内部,你就失去了背景$.post().在$ .post之前,将上下文保存在this该保存按钮功能内的变量中.

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

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

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

Answer 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();