Close jQuery UI Dialog from Iframe


Try this:

$(document).ready(function () {

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>

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

$("#upload-image").click(function (e) {
        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 () {

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

Any ideas?

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


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 :;

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:


this IMO should return the parent of the iframe.

again untested :D

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


That's solves the problem..

try this

    $("#dialogId" ).dialog( "close" );

or the on delegate

    $("#dialogId" ).dialog( "close" );