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?




How to close jQuery dialog when button inside iFrame is clicked?

window.parent.$("#dialogDiv").dialog('close');

That's solves the problem..




try this

$("#yourIframeId").contents().find("#buttonId").click(function(){
    $("#dialogId" ).dialog( "close" );
});

or the on delegate

$(document).on('click',"#buttonId",function(){
    $("#dialogId" ).dialog( "close" );
});



inside your iframe you can get the parent DOM like this:

window.parent.frames[0].parentNode;

this assumes the parent window has only 1 iframe in it, that iframe being the one you are making this call from

Well here is perhaps (untested) another way to do this, create a function in parent window like:

var findParent = function() {
    return $(this).parent();
}

then inside the iframe do :

window.parent.findParent.call(window);

Again untested :-)

OK 3rd attempt.

in your ShowDialog function instead of return false do :

return self;

then in your iframe cache the return in a variable so your button would look like this:

<button onclick="obj = ShowDialog('/companies/add', 400, 320, 'id_company'); return false;">New</button>

so somewhere in your iframe before this button you'd have a var obj;;

then whenever you need the parent of the iframe you could do:

obj.dialogs[window.location.pathname];

this IMO should return the parent of the iframe.

again untested :D







Tags