jQuery模式对话框拳击没有从iFrame关闭

Question

我有一个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中,我能够成功将对话框更改为红色.但是,关闭功能不会关闭我的对话框.从我到目前为止看到的大多数例子来看,这段代码应该可以正常工作,所以我很难过.

Answer 1

正如我在上面的评论中所写,解决方案与运行jquery的实例有关.创建对话框对象时,它位于父窗体的jquery实例的上下文中.在iFrame中,创建了第二个jquery实例,因此对话框不在范围内.

调用$("#structureDialog", window.parent.document).dialog('close');使用jquery的本地实例搜索父级的DOM,因此由于该对话框未在那里初始化,所以无法在那里关闭它.

解决方案是通过重新排列术语来引用父项的jquery实例,如下所示:

parent.$("#structureDialog").dialog('close');

这首先将上下文指向父对象,然后使用父对象的jquery实例查找对话框并将其关闭.

感谢Chrismarx1在这篇文章中指出了这个解决方案:http: //forum.jquery.com/topic/trigger-from-iframe-to-parent-window