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

时间:2012-11-22 21:21:28

标签: jquery dialog jquery-ui-dialog

我在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>

知道为什么会这样吗?

11 个答案:

答案 0 :(得分:126)

试试这个

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

你也可以这样做:

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

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

答案 1 :(得分:19)

如果你无法升级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导致性能问题,我只建议这样做。如果不对所有对话框进行全局关闭,可能还有其他方法可以解决这个问题。

答案 2 :(得分:9)

当我只更新了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版本,我相信你会没事的,但是当你开始使用不同的版本时,你会走出这条路,并得到这样的错误。因此,总而言之,这个错误来自错误匹配的版本(无论如何我都是这样)。

答案 3 :(得分:2)

所以你用这个:

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

如果您在对话框中打开MVC部分视图,则可以在索引中创建隐藏按钮和JQUERY点击事件:

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

然后在局部视图html中调用按钮触发器点击如下:

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

见你。

答案 4 :(得分:2)

如果要在初始化对话框或页面准备就绪时立即打开对话框,还可以在对话框的选项对象中将参数autoOpen设置为true

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

因此,您不必调用`$(&#34; #divDialog&#34;)。对话框(&#34;打开&#34;);

初始化对话框对象时,会自动打开对话框。

答案 5 :(得分:0)

这也是一些解决方法:

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

答案 6 :(得分:0)

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

答案 7 :(得分:0)

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

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

我将.removeData()替换为更具体的删除内容,然后一切又开始正常工作。

答案 8 :(得分:0)

我的情况不同,由于“ ”的范围而失败:

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

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

答案 9 :(得分:0)

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

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

答案 10 :(得分:-2)

我收到此错误消息,因为我在部分视图上使用了div标记而不是父视图