How can I make an AJAX link work once it is moved out of the iFrame?

Question

Hi,

I am using an iFrame with a form that return some content with an AJAX link.
I am then moving the returned content out of the iFrame into the main page.

However, then the ajax link does not work and the error "Element is null" is created once the link is clicked.

How can I move content from the iFrame and still have the AJAX link working?

Here's the code returned by the 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

I see two problems with your code.

First the solution (I think :-))

When your iframe loads, the javascript in it runs. Javascript attaches an observer to parent document's link8.

Inside the observer you define another function (onCreate). This function will run in iframe context, making document object refer to iframe and not to main document. When you remove link8 from iframe to move it to main document, document.getElementById("top") will become null - hence error.

Perhaps change it to:

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

Second problem (that is not really a problem in this particular case) is, if you move whole span (including the script) to main document, the javascript will run again in main document's context. In your case, you should see an error or warning after you move the content, stating that parent is null (or similar).

To remove the second problem, return your iframe data in two divs or similar. Then copy only div with html to main document.

Answer 2

What I did was move the AJAX call out to an external js file and called the function once the link was clicked. It works now.