Comment puis-je faire fonctionner un lien AJAX une fois qu'il est sorti de l'iFrame?

Question

J'utilise un iFrame avec un formulaire qui retourne du contenu avec un lien AJAX.
Je déplace ensuite le contenu retourné hors de l'iFrame dans la page principale.

Cependant, le lien ajax ne fonctionne pas et l'erreur "Element is null" est créée une fois que le lien est cliqué.

Comment puis-je déplacer du contenu de l'iFrame tout en maintenant le lien AJAX actif?

Voici le code renvoyé par le iFrame:

<span id="top"> 
    <a id="link8" onclick=" event.returnValue = false; return false;" href="/item_pictures/delete/7"> 
     <img src="/img/delete.bmp"/> 
    </a> 

    <script type="text/javascript"> 
     parent.Event.observe('link8', 'click', function(event) { 
      new Ajax.Updater('top','/item_pictures/delete/3', { 
       asynchronous:true, evalScripts:true, 
       onCreate:function(request, xhr) { 
        document.getElementById("top").innerHTML = "<img src=\"/img/spinner_small.gif\">"; 
       }, 
       requestHeaders:['X-Update', 'top'] 
      }) 
     }, false); 
    </script> 

</span> 

Answer 1

Ce que j'ai fait était de déplacer l'appel AJAX vers un fichier js externe et appelé la fonction une fois que le lien a été cliqué. Ça fonctionne maintenant.

Answer 2

Je vois deux problèmes avec votre code.

D'abord la solution (je pense :-))

Lorsque vos charges iFrame, le javascript il fonctionne. Javascript attache un observateur au lien parent8 du document.

A l'intérieur de l'observateur, vous définissez une autre fonction (onCreate). Cette fonction s'exécutera dans un contexte iframe, rendant l'objet document référé à iframe et non au document principal. Lorsque vous supprimez link8 de iframe pour le déplacer vers le document principal, document.getElementById ("top") deviendra null - d'où erreur.

changer peut-être à:

parent.document.getElementById("top").innerHTML = "<img src=\"/img/spinner_small.gif\">"; 

Deuxième problème (ce n'est pas vraiment un problème dans ce cas particulier) est, si vous déplacez la durée entière (y compris le script) au document principal, le javascript fonctionnera encore une fois dans le contexte du document principal. Dans votre cas, vous devriez voir une erreur ou un avertissement après avoir déplacé le contenu, indiquant que le parent est null (ou similaire).

Pour supprimer le second problème, renvoyez vos données iframe dans deux divs ou similaire. Puis copiez seulement div avec html au document principal.