Question

I’m working on a script that will submit form files (images) through a temporary iFrame and then return thumbnails of the images, which are then moved from the iFrame to the main document. This works fine. But I am also embedding a link which the user can click to remove the image if desired. This link uses Prototype to send a request to delete the image:

<div id="upload_area">
<div class="image">
    <img src="/img/submitted/thumbnail.jpg" alt="arp" />

    <div class="delete">
        <a href="/images/del_submit/576" id="link1927905376" onclick=" event.returnValue = false; return false;">X</a>

        <script type="text/javascript"> 
            //<![CDATA[
            Event.observe('link1927905376', 'click', function(event) { new Ajax.Updater('upload_area','/images/del_submit/576', {asynchronous:true, evalScripts:true, requestHeaders:['X-Update', 'upload_area']}) }, false);
            //]]>
        </script>
    </div>
</div>

When I load this, however, the event listener is always ignored. If I load the same code via ajax without using the iframe, it works fine. I’m assuming this is because the event handler is not being registered when it is moved from the iframe to the main document. But I’m not sure how to get around that…

Any tips on making something like this work?

Answer 1

The solution was rather simple, after all. Since I was using a non-Prototype script to move the response from the iframe to a div on the page, I just had to call evalScripts() on the container after it was moved:

window.parent.$m(id_element).innerHTML.evalScripts();

In the case of a normal Ajax operation, Prototype calls evalScripts() by default.