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!