JQuery 错误：无法在初始化之前调用对话框上的方法；试图调用方法“关闭”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15534063/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JQuery Error: cannot call methods on dialog prior to initialization; attempted to call method 'close'
提问by devdar
I am suddenly getting this error from jQuery :
我突然从 jQuery 收到这个错误：
Error: cannot call methods on dialog prior to initialization; attempted to call method 'close'
错误：无法在初始化之前调用对话框上的方法；试图调用方法“关闭”
Plugins
插件
<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 code
jQuery 代码
I am getting those messages in the following function:
我在以下函数中收到这些消息：
$(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
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>
采纳答案by pmckeown
Looks like your buttons are not declared correctly (according to the latest jQuery UI documentationanyway).
看起来您的按钮未正确声明（无论如何，根据最新的 jQuery UI 文档）。
try the following:
尝试以下操作：
$( ".selector" ).dialog({
buttons: [{
text: "Ok",
click: function() {
$( this ).dialog( "close" );
}
}]
});
回答by Behr
I had a similar problem when opening a dialog with a partial layout in asp.net MVC. I was loading the jquery library on the partial page as well as the main page which was causing this error to come up.
在 asp.net MVC 中打开带有部分布局的对话框时，我遇到了类似的问题。我正在部分页面以及导致此错误出现的主页上加载 jquery 库。
回答by EdsonF
Try this - it works for me:
试试这个 - 它对我有用：
$(".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;
});
Hope it will help you
希望它会帮助你
回答by Senguttuvan Amaladass
Im also got the same Error: cannot call methods on dialog prior to initialization; attempted to call method 'close'
我也遇到了同样的错误：在初始化之前无法在对话框上调用方法；试图调用方法“关闭”
what i did is i triggered the close button event which is in the dialog header like
我所做的是触发了对话框标题中的关闭按钮事件，例如
this is working fine for me to close the dialog
这对我来说关闭对话框很好用
function btnClose() {
$(".ui-dialog-titlebar-close").trigger('click');
}
回答by Adrian Lopez
Is your $(this).dialog("close")by any chance being called from inside an Ajax "success" callback? If so, try adding context: thisas one of the options to your $.ajax()call, like so:
您是否$(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" );
}
});
}
}
});
回答by JohnPan
it seems for some reason jQuery UI will try to run all code defined in buttons at definition time. It is crazy but I had the same issue and it stoped once I made this change.
似乎出于某种原因，jQuery UI 将尝试在定义时运行按钮中定义的所有代码。这很疯狂，但我遇到了同样的问题，并且在我进行此更改后就停止了。
if ($(this).dialog.isOpen === true) {
$(this).dialog("close");
}
回答by Peter Herdenborg
I got the same error in 1.10.2. In my case, I wanted to make clicking on the background overlay hide the currently visible dialog, regardless of which element it was based upon. Therefore I had this:
我在 1.10.2 中遇到了同样的错误。在我的例子中，我想让点击背景覆盖隐藏当前可见的对话框，不管它基于哪个元素。因此我有这个：
$('body').on("click", ".ui-widget-overlay", function () {
$(".ui-dialog").dialog('destroy');
});
This used to be working, so I think they must have removed support in JQUI for calling .dialog() on the popup itself at some point.
这曾经是有效的，所以我认为他们必须在某个时候取消了 JQUI 中对弹出窗口本身调用 .dialog() 的支持。
My workaround looks like this:
我的解决方法如下：
$('body').on("click", ".ui-widget-overlay", function () {
$('#' + $(".ui-dialog").attr('aria-describedby')).dialog('destroy');
});
回答by osh
I stumbled over the same and wanted to share my solution:
我偶然发现了同样的问题，想分享我的解决方案：
<script type="text/javascript">
$( "#dialog-confirm" ).dialog("option","buttons",
{
"delete": function() {
$.ajax({
url: "delete.php"
}).done(function(msg) {
//here "this" is the ajax object
$(this).dialog( "close" );
});
},
"cancel": function() {
//here, "this" is correctly the dialog object
$(this).dialog( "close" );
}
});
</script>
because "this" is referencing to an non-dialog object, I got the error mentioned.
因为“this”引用了一个非对话框对象，所以我收到了提到的错误。
Solution:
解决方案：
<script type="text/javascript">
var theDialog = $( "#dialog-confirm" ).dialog("option","buttons",
{
"delete": function() {
$.ajax({
url: "delete.php"
}).done(function(msg) {
$(theDialog).dialog( "close" );
});
},
"cancel": function() {
$(this).dialog( "close" );
}
});
</script>
回答by Andrew Fox
I had this problem once before where one dialog box was throwing this error, while all the others were working perfectly. The answer was because I had another element with the same id="dialogBox"else ware on the page. I found this thread during a search, so hopefully this will help someone else.
我曾经遇到过这个问题，其中一个对话框抛出此错误，而所有其他对话框都运行良好。答案是因为我id="dialogBox"在页面上有另一个具有相同else ware 的元素。我在搜索过程中发现了这个线程，所以希望这会对其他人有所帮助。
回答by Danilo Antonietto
So you use this:
所以你使用这个：
var opt = {
autoOpen: false,
modal: true,
width: 550,
height:650,
title: 'Details'
};
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.
拜拜。
