jquery ui: cannot call methods on dialog prior to initialization; attempted to call method 'close'

jquery, jquery-ui

Solution

You are losing the context of `this` once you are inside of `$.post()`. Before your $.post, save the context `this` in a variable inside of that save button function.

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

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

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

Problem

I am using jquery ui dialog, I download it from jquery ui website, version is jquery-ui-1.10.2.custom.min.js, and jquery is jquery-1.9.1.js which is bundled with jquery ui js, but now I am encountering a question: when dialog is opened and click save button, I want the dialog to be closed, here is my code: ``` $(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"); }); ``` now when I close the 'save success' popuped dialog, `dialog-form` dialog was not closed, and an error occurs: Uncaught Error: cannot call methods on dialog prior to initialization; attempted to call method 'close' jquery-1.9.1.js:507. and there is another error: Uncaught SyntaxError: Unexpected token o jquery-1.9.1.js:541 thanks.

Original source