Cerrar el cuadro de diálogo de jQuery UI desde Iframe

Question

Implementé el siguiente código para cargar fotos dentro de un cuadro de diálogo jQuery (utilizando un iframe).

Aquí está el marco flotante

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

Y aquí está el código jQuery en la página principal que se encarga de abrir el diálogo.

$("#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') } 
    }); 
}); 

estoy inyectando después un script (en la página iframe) después de la subida es exitosa cual pasa un resultado de nuevo a la página principal, pero quiero cerrar el diálogo al mismo tiempo.

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

El #imagePathValue se pasa exitosamente, pero me parece que no puede ser capaz de cerrar el diálogo.

¿Alguna idea?

Answer 1

Con el fin de hacer que funcione, hay que llamar a la jQuery de los padres, no desde dentro del marco flotante. Para ello, utilice la siguiente ...

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

Eso debería hacerlo!

Answer 2

Prueba esto:

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

Answer 3

Además de que también debe hacer esto:

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

modo se elimina la instancia de marco flotante después del cierre de diálogo.

código de manera definitiva debería ser:

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

Gracias Kaushal

Answer 4

Definitivamente recordar que para llamar esos tipos de funciones, se debe hacer referencia a la función en el documento principal en sí. Cuando utiliza el segundo argumento del constructor de jquery, solo especifica el destino del método, no dónde ejecutarlo.

Es por eso que $('element', window.parent.document).method(); no funcionará, y window.parent.jQuery('element').method(); lo hará.