Close jQuery UI Dialog from Iframe


Answers

Try this:

$(document).ready(function () {
    $(parent.document).find('#imagePathValue').val('theimagevalue');
    window.parent.$('#upload-form').dialog('close');
});
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?




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.




Links