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

Question

我突然从jQuery得到这个错误:

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

插件

 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
 <script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script> 

jQuery代码

我在以下函数中获取这些消息:

$(document).ready(function() {
  if ($('#results').html().length != 0) {
    alert('has information');

    $('#dialog').dialog({
      modal: true,
      buttons: {
        Ok: function() {
          // If I use $(this).dialog($(this)).dialog('close'), the UI is displayed,
          // however I do not see the OK button and no errors 
          $(this).dialog('close');
        }
      }
    });
  } else {
    alert('has no data');
  }
});

HTML

<div id="dialog" title="Server Response">
  <p><span class="${icon}" style="float: left; margin: 0 7px 50px 0;"></span>
    <label id="results">${results}</label>
  </p>      
</div>

Answer 1

在asp.net MVC中打开带有局部布局的对话框时,我遇到了类似的问题.我在部分页面上加载了jquery库以及导致出现此错误的主页面.

Answer 2

看起来你的按钮没有正确声明(无论如何根据最新的jQuery UI文档).

尝试以下方法:

$( ".selector" ).dialog({ 
   buttons: [{ 
      text: "Ok", 
      click: function() { 
         $( this ).dialog( "close" ); 
      }
   }]
});

Answer 3

试试这个 - 它对我有用:

$(".editDialog").on("click", function (e) {
    var url = $(this).attr('href');
    $("#dialog-edit").dialog({
        title: 'Edit Office',
        autoOpen: false,
        resizable: false,
        height: 450,
        width: 380,
        show: { effect: 'drop', direction: "up" },
        modal: true,
        draggable: true,
        open: function (event, ui) {
            $(this).load(url);
        },
        close: function (event, ui) {
            $("#dialog-edit").dialog().dialog('close');
        }
    });

    $("#dialog-edit").dialog('open');
    return false;
});

希望它会对你有所帮助

Answer 4

我也得到了同样的错误:在初始化之前无法在对话框上调用方法; 试图调用方法'关闭'

我做的是我触发了对话框标题中的关闭按钮事件

这对我来说很好,可以关闭对话框

function btnClose() {
$(".ui-dialog-titlebar-close").trigger('click');
}

Answer 5

您是否$(this).dialog("close")有机会从Ajax"成功"回调中调用？如果是这样,请尝试添加context: this为您的$.ajax()通话选项之一,如下所示:

$("#dialog").dialog({
    modal: true,
    buttons: {
        Ok: function() {
            $.ajax({
                url: '/path/to/request/url',
                context: this,
                success: function(data)
                {
                    /* Calls involving $(this) will now reference 
                       your "#dialog" element. */
                    $(this).dialog( "close" );
                }
            });
        }
    }
});

Answer 6

似乎由于某种原因 jQuery UI 会尝试在定义时运行按钮中定义的所有代码。这很疯狂，但我遇到了同样的问题，一旦我做了这个改变，它就停止了。

if ($(this).dialog.isOpen === true) { 
    $(this).dialog("close");
}