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

Posted 2023-02-15

【中文标题】jquery ui Dialog：无法在初始化之前调用对话框上的方法

【英文标题】：jquery ui Dialog: cannot call methods on dialog prior to initialization

【发布时间】：2012-11-11 06:58:37

【问题描述】：

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

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

以下是代码：

javascript

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

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

html代码

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

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

【参考方案1】：

试试这个

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

你也可以这样做：

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

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

【讨论】：

这对我有用。每次我想像这样打开它还是只有第一次打开它时，我是否必须初始化对话框？有很多对话框。有没有办法先设置选项，然后通过按钮打开对话框？

我发现这个解决方案还解决了对话框成功打开，关闭，然后用户尝试再次打开对话框。谢谢@ZOD

给了你+1，因为它也解决了我的问题，但你能解释一下它为什么有效吗？

@IgorLacik 我假设 .dialog() 返回一个自身的实例，以便您可以执行链接。因此 .dialog(opt).dialog('open') 实例化一个对话框对象（第一次调用），然后对其执行 'open'。然后我假设调用 $(obj).dialog(opt) 然后调用 $(obj).dialog('open') 将在 jquery 对象上实例化单独的对话框对象，因此第二个不会看到第一个配置选项。如果不深入研究对话代码，很难确定，而且我没有时间这样做：D

我已更新问题以解释您试图解释的内容。

【参考方案2】：

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

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

你可以像这样解决它：

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

或者，如果您控制视图并且知道整个页面上根本不应该使用其他对话框，您可以这样做：

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

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

【讨论】：

这对我有用！

【参考方案3】：

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

【讨论】：

我通过将我的 jquery ui 版本升级到 1.9.2 解决了这个问题，然后它就可以工作了。所以，jquery 1.9.1 和 jquery ui 1.9.2 摆脱了上面的错误。

【参考方案4】：

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

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

【参考方案5】：

所以你用这个：

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

如果您在 Dialog 中打开 MVC Partial View，您可以在索引中创建隐藏按钮和 JQUERY 点击事件：

$("#YourButton").click(function()

   theDialog.dialog("open");
   OR
   theDialog.dialog("close");
);

然后在局部视图 html 中调用按钮触发点击：

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

再见。

【参考方案6】：

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

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

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

对话框对象初始化后，对话框自动打开。

【讨论】：

'autoOpen' 默认为真。无需在选项中再次指定。

【参考方案7】：

我的情况不同，因为'this'的范围而失败：

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

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

【参考方案8】：

这也是一些解决方法：

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

【参考方案9】：

我收到此错误消息是因为我在部分视图而不是父视图上有 div 标签

【讨论】：

这到底是什么意思？

这解释得不好，但有效。在 MVC 中，我的部分视图上有包含对话框的 div 标签。当我将包含的 div 标签移动到父页面时，对话框正常运行。

【参考方案10】：

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

【参考方案11】：

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

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

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