Question

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

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.