Fermer Boîte de dialogue jQuery UI de Iframe

Question

J'ai implémenté le code suivant pour télécharger des photos dans une boîte de dialogue jQuery (en utilisant un iframe).

Voici le Iframe

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

Et voici le code jQuery sur la page mère qui prend soin d'ouvrir la boîte de dialogue.

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

Je puis injecter un script (sur la page iframe) après le téléchargement est réussi qui passe un résultat à la page parent, mais je veux fermer la boîte de dialogue en même temps.

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

Le #imagePathValue est passé avec succès, mais je ne peux pas sembler être en mesure de fermer la boîte de dialogue.

Des idées?

Answer 1

Pour le faire fonctionner, vous devez appeler le jQuery du parent, et non à l'intérieur de l'iframe. Pour ce faire, utilisez ce qui suit ...

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

Cela devrait le faire!

Answer 2

Essayez ceci:

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

Answer 3

En plus de cela, vous devez aussi le faire:

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

si l'instance Iframe est retirée après la fermeture de dialogue.

si le code final devrait être:

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

Merci Kaushal

Answer 4

se souvient certainement que d'appeler ces types de fonctions, il doit se référer à la fonction dans le document parent lui-même. Lorsque vous utilisez le deuxième argument du constructeur jquery, vous spécifiez uniquement la cible de la méthode, et non l'emplacement où l'exécuter.

C'est pourquoi $('element', window.parent.document).method(); ne fonctionnera pas, et window.parent.jQuery('element').method(); sera.