Question

I’ve seen a few questions like the one I’ll ask but nothing identical. I have two html files, main and today. What I want to do is load today.html via AJAX into a child div in main.html. Sometime after load, I would like to call a function that resides in main.html from today.html

Within Main I have this function:

function drawCircle (size){             
   alert('DRAWING');
}

This AJAX load:

$("#leftofad").ajax({
   url: ":Today.html?r="+genRand(),
   type: 'GET',         
   success: function(data) { },
   error: function() { alert('Failed!'); },
});

And this div:

<div id="leftofad"></div>

In Today.html I have

<script type="text/javascript">
    $(document).ready(function(){       
       drawCircle (100);
    });
</script>

The load is going well but Today.html doesnt seem to recognize the drawCircle function. I’ve tried several precursors including this., window., and parent..

I understand that I can use the callback method of the AJAX loader in jQuery but I don’t necessarily want to call drawCircle when the load is complete. I may want to wait a bit or do it as a result of an action from the user. Is it possible to reference these functions from an AJAX-loaded div? If not, can I use an alternative method like events and listeners to fire the drawCircle function?

Answer 1

Since you will be loading JS into your page, try calling the function directly?
(The ready function won’t run as the main page is already loaded)

Main.html

<script type="text/javascript">
    function drawCircle(size) { alert("DRAWING" + size); }

    $(function() {
        $("#leftofad").load("Today.html?r="+genRand(), function() {
              alert('loaded successfully!');
        });
    });
</script>
<div id="leftofad"></div>

Today.html

<script type="text/javascript">
    drawCircle(100);
</script>

If this doesn’t work, I strongly suspect that JavaScript returned in an AJAX call is not executed.

In this case, refer to: How to execute javascript inside a script tag returned by an ajax response