JQuery modal boxing dialogue doesn't close from iFrame

Question

I have a jQuery modal dialog with an iFrame in it that shows some content. When the user selects a parameter in iFrame, I make an Ajax call and then I want to close my dialog box, however it does not close for me.

In my parent form, I have a div tag:

div id="structureDialog" title="Add Structure" 

I open my dialog when a user clicks on a parent element:

 // 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 buildSuccess function, I can successfully change my dialog box to red. However, the close function does not close my dialog box. From most of the examples I've seen so far, this code should work fine, so I'm at a dead end.

Answer 1

As I wrote in the comment above, the solution is related to the jquery launch instance. When a dialog object is created, it is in the context of the jquery instance of the parent form. A second jquery instance is created in iFrame, and therefore the dialog box is not in scope.

Call $("#structureDialog", window.parent.document).dialog('close'); searches for the DOM of the parent using a local jquery instance, so since the dialog box was not initialized there, it cannot be closed.

The solution is to reference the parent jquery instance, rearranging the terms as follows:

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

First, the parent context is specified, and then the parent jquery instance is used to find the dialog box and close it.

Kudos to chrismarx1 on this post that pointed me to this solution: http://forum.jquery.com/topic/trigger-from-iframe-to-parent-window

Answer 2

try

 $("#structureDialog", window.opener.document).dialog('close');