Jquery ui: не может вызывать методы в диалоге до инициализации; попытался вызвать метод "закрыть"

Я использую jquery ui dialog, я загружаю его с сайта 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 не был закрыт и произошла ошибка:

Неиспользуемая ошибка: не может вызывать методы в диалоге до инициализации; попытался вызвать метод "закрыть" jquery-1.9.1.js: 507.

и есть еще одна ошибка:

Uncaught SyntaxError: Неожиданный токен o jquery-1.9.1.js: 541

спасибо.

Ответ 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
            });
        }       
    }
});

Ответ 2

Когда вы инициализируете диалог, вызывая метод .dialog(options), создается новое диалоговое окно, но оно не связано с исходным div, который вы хотите преобразовать в диалог ( "диалоговая форма" в вашем примере кода), Функция dialog(options) возвращает элемент, содержащий данные диалога. Итак, если вы сделаете так:

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

Затем вы можете вызвать открытый метод следующим образом:

myDialog.dialog('open');

Если вы хотите найти элемент, связанный с диалогом, это ближайший div с классом "ui-dialog-content":

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

Данные диалога - это данные uiDialog, которые вы увидите, если вы посмотрите на данные этого элемента:

myDialog.data();

Ответ 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');