Close jQuery UI Dialog from Iframe

Question

I've implemented the following code for uploading photos inside a jQuery dialog (using an iframe).

Here's the Iframe

<div style="display: none">
    <iframe id="upload-form" frameborder="0" marginheight="0" marginwidth="0" src="Upload.aspx"></iframe>
</div>

And here's the jQuery code on the parent page which takes care of opening the dialog.

$("#upload-image").click(function (e) {
    e.preventDefault();
    $('#upload-form').dialog({
        modal: true,
        width: 300,
        title: "Upload Image",
        autoOpen: true,
        close: function(event, ui) { $(this).dialog('close') }
    });
});

I'm then injecting a script (on the iframe page) after the upload is successful which passes a result back to the parent page, but I want to close the dialog at the same time.

$(document).ready(function () {
    $(parent.document).find('#imagePathValue').val('theimagevalue');
    $(parent.document).find('#upload-form').dialog('close');
});

The #imagePathValue is passed successfuly, but I can't seem to be able to close the dialog.

Any ideas?

Answer 1

In order to make it work, you have to call the jQuery from the parent, not from within the iframe. To do this, use the following...

window.parent.jQuery('#upload-form').dialog('close');

That should do it!

Answer 2

Try this:

$(document).ready(function () {
    $(parent.document).find('#imagePathValue').val('theimagevalue');
    window.parent.$('#upload-form').dialog('close');
});

Answer 3

In addition to that you should also do this:

window.parent.$('#upload-form').remove();

so the Iframe instance is removed after dialog close.

so Final code should be :

$(document).ready(function () {
    $(parent.document).find('#imagePathValue').val('theimagevalue');
    window.parent.$('#upload-form').dialog('close');
    window.parent.$('#upload-form').remove();
});

Thanks Kaushal

Answer 4

Definitely remember that to call those types of functions, it must refer to the function in the parent document itself. When you use the second argument of the jquery constructor, you're only specifying the target of the method, not where to execute it.

That is why $('element', window.parent.document).method(); will not work, and window.parent.jQuery('element').method(); will.