jQuery 模式对话框未从 iFrame 关闭
我有一个 jQuery 模式对话框，其中有一个显示一些内容的 iFrame。当用户在 iFrame 中选择一个选项时，我会进行 Ajax 调用，然后我想关闭对话框，但它并没有为我关闭。
在我的父窗体上，我有一个 div 标签：
div id="structureDialog" title="Add Structure"
当用户单击父窗体上的元素时，我打开对话框：
// bind an onclick event onto tiles to display the modal dialogue window
$(".stationTile").bind('click', function () {
var src = "<iframe src="myurl" />";
var locationID = 1;
$("#structureDialog").attr("locationID", locationID);
$("#structureDialog").html(src); //iframe
$("#structureDialog").dialog({
modal: true,
});
});
在我的 iFrame 中，我有以下内容：
$(".userOption").bind('click', function () {
$.ajax({
async: false,
type: "POST",
url: "/NewStructure.aspx/Build",
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: buildSuccess
});
});
function buildSuccess(res, dest) {
$("body", window.parent.document).attr("style", "background-color:yellow;");
$("#structureDialog", window.parent.document).attr("style", "background-color:red;");
$("#structureDialog", window.parent.document).dialog('close');
}
在我的函数 buildSuccess 中，我能够成功地将对话框更改为红色。但是，关闭函数不会关闭我的对话框。从迄今为止我见过的大多数示例来看，这段代码应该可以正常工作，所以我很困惑。
I have a jQuery modal dialog with an iFrame in it that shows some content. When a user selects an option in the iFrame, I make an Ajax call, and then I want to close my dialog, however it is not closing for me.
On my parent form I have a div tag:
div id="structureDialog" title="Add Structure"
I open my dialog when the user clicks an element on the parent:
// bind an onclick event onto tiles to display the modal dialogue window
$(".stationTile").bind('click', function () {
var src = "<iframe src="myurl" />";
var locationID = 1;
$("#structureDialog").attr("locationID", locationID);
$("#structureDialog").html(src); //iframe
$("#structureDialog").dialog({
modal: true,
});
});
In my iFrame I have the following:
$(".userOption").bind('click', function () {
$.ajax({
async: false,
type: "POST",
url: "/NewStructure.aspx/Build",
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: buildSuccess
});
});
function buildSuccess(res, dest) {
$("body", window.parent.document).attr("style", "background-color:yellow;");
$("#structureDialog", window.parent.document).attr("style", "background-color:red;");
$("#structureDialog", window.parent.document).dialog('close');
}
In my function buildSuccess, I am able to successfully change my dialog box to red. However, the close function will not close my dialog box. From most examples I have seen so far, this code should work fine, so I'm stumped.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
正如我在上面的评论中所写，解决方案与正在运行的 jquery 实例有关。创建对话框对象时，它位于父窗体的 jquery 实例的上下文中。在 iFrame 中，创建了第二个 jquery 实例，因此该对话框不在范围内。
调用
$("#structuralDialog", window.parent.document).dialog('close');使用 jquery 的本地实例搜索父级的 DOM，因此由于对话框不是在那里初始化，不能在那里关闭。解决方案是通过重新排列术语来引用父级的 jquery 实例，如下所示：
parent.$("#structionDialog").dialog('close');这首先将上下文指向父级，然后使用父级的 jquery 实例找到该对话框并将其关闭。
感谢 chrismarx1 这篇文章，它向我指出了这个解决方案：
http://forum.jquery.com/topic/trigger-from-iframe-to-父窗口
As I wrote in the comment above, the solution is related to the instance of jquery being run. When the dialog object is created, it is in the context of the jquery instance of the parent form. In an iFrame, a second instance of jquery is created, and hence the dialog box is not in scope.
Calling
$("#structureDialog", window.parent.document).dialog('close');searches the DOM of the parent using the local instance of jquery, and so since the dialog box was not initialized there, it cannot be closed there.The solution is to reference the jquery instance of the parent by rearranging the terms as follows:
parent.$("#structureDialog").dialog('close');This points the context to the parent first, and then uses the jquery instance of the parent to find the dialog box and close it.
Kudos to chrismarx1 on this post which pointed me to this solution:
http://forum.jquery.com/topic/trigger-from-iframe-to-parent-window
尝试
try