Question

I hit a problem when I store the html below into a div via ajax

<script type="text/javascript" src="site.com/file.js"></script>
<script type="text/javascript">
//use file.js object, get an exception because it doesn't exist

I fixed it by hosting it locally (/myjs/file.js). However that feels like its a hack. How do I make sure I load it first then execute? It seems like jquery.ready isn’t the solution because the dom was ready before I ajax the html in. How do I wait properly?

Answer 1

You mention jQuery.ready, so I’m guessing you use jQuery. If so, instead of putting <script> tags in the content of the div, use jQuery.getScript, which will give you a callback when the script is loaded.

If for some reason you can’t do that, you can poll, e.g. in your code that wants to use something from file.js:

function doSomethingWithFileJS() {
    if (typeof anObjectProvidedByFileJS === "undefined") {
        setTimeout(doSomethingWithFileJS, 50);
        return;
    }

    // Here, you know file.js has been loaded
}