jquery ui Dialog：无法在初始化之前调用对话框上的方法

jquery ui Dialog: cannot call methods on dialog prior to initialization

提问by core-chain.io

I have an app on jquery 1.5 with dialogs worked fine. While I have a lot of .live handlers, I changed this to .on. For that, I have to update jquery (now 1.8.3 an jquerui 1.9.1).

我在 jquery 1.5 上有一个带有对话框的应用程序运行良好。虽然我有很多 .live 处理程序，但我将其更改为 .on。为此，我必须更新 jquery（现在是 1.8.3 和 jquerui 1.9.1）。

Now, I got: Error: cannot call methods on dialog prior to initialization; attempted to call method 'close'

现在，我得到了： Error: cannot call methods on dialog prior to initialization; attempted to call method 'close'

Following is the code:

以下是代码：

Javascript

Javascript

var opt = {
        autoOpen: false,
        modal: true,
        width: 550,
        height:650,
        title: 'Details'
};

$(document).ready(function() {
$("#divDialog").dialog(opt);
    $("#divDialog").dialog("open");
...    

html code

html代码

<div id="divDialog">
<div id="divInDialog"></div>
</div>

Any idea why this might be happening?

知道为什么会发生这种情况吗？

回答by Kneel-Before-ZOD

Try this instead

试试这个

$(document).ready(function() {
  $("#divDialog").dialog(opt).dialog("open");
});

You can also do:

你也可以这样做：

var theDialog = $("#divDialog").dialog(opt);
theDialog.dialog("open");

That's because the dialog is not stored in $('#divDialog'), but on a new div that is created on the fly and returned by the .dialog(opt)function.

那是因为对话框不是存储在 中$('#divDialog')，而是存储在动态创建并由.dialog(opt)函数返回的新 div 中。

回答by Cymen

If you cannot upgrade jQuery and you are getting:

如果您无法升级 jQuery 并且您得到：

Uncaught Error: cannot call methods on dialog prior to initialization; attempted to call method 'close'

You can work around it like so:

你可以像这样解决它：

$(selector).closest('.ui-dialog-content').dialog('close');

Or if you control the view and know no other dialogs should be in use at all on the entire page, you could do:

或者，如果您控制视图并且知道在整个页面上根本不应该使用其他对话框，则可以执行以下操作：

$('.ui-dialog-content').dialog('close');

I would only recommend doing this if using closestcauses a performance issue. There are likely other ways to work around it without doing a global close on all dialogs.

如果使用closest导致性能问题，我只会建议这样做。可能还有其他方法可以解决它，而无需对所有对话框进行全局关闭。

回答by johntrepreneur

I got this error when I only updated the jquery library without updating the jqueryui library in parallel. I was using jquery 1.8.3 with jqueryui 1.9.0. However, when I updated jquery 1.8.3 to 1.9.1 I got the above error. When I commented out the offending .closemethod lines, it then threw an error about not finding .browserin the jquery library which was deprecated in jquery 1.8.3 and removed from jquery 1.9.1. So bascially, the jquery 1.9.1 library was not compatible with the jquery ui 1.9.0 library despite the jquery ui download page saying it works with jquery 1.6+. Essentially, there are unreported bugs when trying to use differing versions of the two. If you use the jquery version that comes bundled with the jqueryui download, I'm sure you'll be fine, but it's when you start using different versions that you off the beaten path and get errors like this. So, in summary, this error is from mis-matched versions (in my case anyway).

当我只更新 jquery 库而不并行更新 jqueryui 库时，我收到了这个错误。我使用 jquery 1.8.3 和 jqueryui 1.9.0。但是，当我将 jquery 1.8.3 更新到 1.9.1 时，出现了上述错误。当我注释掉有问题的.close方法行时，它抛出了一个关于找不到的错误.browser在 jquery 1.8.3 中弃用并从 jquery 1.9.1 中删除的 jquery 库中。所以基本上，jquery 1.9.1 库与 jquery ui 1.9.0 库不兼容，尽管 jquery ui 下载页面说它适用于 jquery 1.6+。本质上，在尝试使用两者的不同版本时存在未报告的错误。如果您使用与 jqueryui 下载捆绑在一起的 jquery 版本，我相信您会没事的，但是当您开始使用不同的版本时，您会偏离常规并遇到这样的错误。所以，总而言之，这个错误来自不匹配的版本（无论如何在我的情况下）。

回答by Danilo Antonietto

So you use this:

所以你使用这个：

var theDialog = $("#divDialog").dialog(opt);
theDialog.dialog("open");

and if you open a MVC Partial View in Dialog, you can create in index a hidden button and JQUERY click event:

如果您在对话框中打开 MVC 部分视图，则可以在索引中创建一个隐藏按钮和 JQUERY 单击事件：

$("#YourButton").click(function()
{
   theDialog.dialog("open");
   OR
   theDialog.dialog("close");
});

then inside partial view html you call button trigger click like:

然后在局部视图 html 中调用按钮触发器单击，例如：

$("#YouButton").trigger("click")

see ya.

拜拜。

回答by Ga?per Sladi?

If you want to open the Dialog immediately when the Dialog is initialized or the page is ready, you can also set the parameter autoOpento truein the options object of dialog:

如果想在Dialog初始化或者页面准备好时立即打开Dialog，也可以在dialog的options对象中设置参数autoOpen为true：

var opt = {
        autoOpen: true,
        modal: true,
        width: 550,
        height:650,
        title: 'Details'
};

Thus, you do not have to call the `$("#divDialog").dialog("open");

因此，您不必调用 `$("#divDialog").dialog("open");

When dialog object is initialized, the dialog is automatically opened.

当对话框对象被初始化时，对话框会自动打开。

回答by Tomin

The new jQuery UI version will not allow you to call UI methods on dialog which is not initialized. As a workaround, you can use the below check to see if the dialog is alive.

新的 jQuery UI 版本将不允许您在未初始化的对话框上调用 UI 方法。作为一种解决方法，您可以使用以下检查来查看对话框是否处于活动状态。

if (modalDialogObj.hasClass('ui-dialog-content')) {
    // call UI methods like modalDialogObj.dialog('isOpen')
} else {
    // it is not initialized yet
}

回答by gnardizzi

I simply had to add the ScriptManager to the page. Issue resolved.

我只需要将 ScriptManager 添加到页面。问题解决了。

回答by AnthonyVO

In my case the problem was that I had called $("#divDialog").removeData();as part of resetting my forms data within the dialog.

在我的情况下，问题是我$("#divDialog").removeData();在对话框中重置表单数据时调用了它。

This resulted in me wiping out a data structure named uiDialogwhich meant that the dialog had to reinitialize.

这导致我删除了一个名为的数据结构uiDialog，这意味着对话框必须重新初始化。

I replaced .removeData()with more specific deletes and everything started working again.

我替换.removeData()了更具体的删除，一切又开始工作了。

回答by datdinhquoc

My case is different, it fails because of the scope of 'this':

我的情况不同，它因“ this”的范围而失败：

//this fails:
$("#My-Dialog").dialog({
  ...
  close: ()=>{
    $(this).dialog("close");
  }
});

//this works:
$("#My-Dialog").dialog({
  ...
  close: function(){
    $(this).dialog("close");
  }
});

回答by Damian Królikowski

This is also some work around:

这也是一些解决方法：

$("div[aria-describedby='divDialog'] .ui-button.ui-widget.ui-state-default.ui-corner-all.ui-button-icon-only.ui-dialog-titlebar-close").click();