Question

I have a page where I am using jquery/ajax to pull down a chunk of HTML/JS from another component and injecting it into the page. That HTML references additional JS files, and I need those referenced JS files to be loaded before I run my javascript.

The HTML/JS that is being injected looks something like this:

<script type="text/javascript" src="http://myserver/js/ABunchOfStuff.js"></script>
<div>
   blah blah blah
</div>
<script type="text/javascript">
    //"sourceList" is defined in the ABunchOfStuff.js above, but it's not available by the time this executes.  
    $("input#autocomplete").autocomplete({
        source: sourceList,
        minLength: 2
    });
</script>

Normally I would just hook into a window load event or a $(document).ready() or whatever, but in this case the window and document have already been completely loaded, and now we’re adding additional content after the fact.

One possiblity would be to put a recursive setTimeout call in that would keep firing until the referneced javascript was available, but that’s pretty ugly.

So is there any clean way to trap the event of a referenced javascript has been loaded and to execute code at that time?

Thanks

Answer 1

You can also use getScript and do your autoComplete in the success callback:

jQuery.getScript( 'http://myserver/js/ABunchOfStuff.js', function(data, textStatus) {
        $("input#autocomplete").autocomplete({
            source: sourceList,
            minLength: 2
        });
} );