Loading scripts dynamically

Question

I'm loading a few YUI scripts dynamically in my code in response to an Ajax request. The DOM and the page is fully loaded when the request is made - it's a response for an user event.

I add the <scripts> tag to head as children, but I stumbled in a few problems:

I add two YUI scripts hosted at the Yahoo! CDN and an inlined script of my own responsible for creating object, adding event listeners and rendering the YUI widgets. But I when my script run the YUI scripts are not loaded yet giving me errors and not running as I expect.

There's a way to only run my script (or define a function to be run) when YUI scripts are fully loaded?

Answer 1

Have you tried an onload event?

Edited:(thanks Jamie)

var script = document.createElement("script");
script.type = "text/javascript";
script.src = src;
//IE:
if(window.attachEvent && document.all) {
    script.onreadystatechange = function () {
        if(this.readyState === "complete") {
            callback_function(); //execute
        }
    };
}
//other browsers:
else {
    script.onload = callback_function; //execute
}
document.getElementsByTagName("head")[0].appendChild(script);

Answer 2

If you're using YUI 2.x I highly recommend using the YUI Get utility, as it's designed to handle just this sort of a problem.