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?

Here is a very detailed answer which also covers dynamic script loading: stackoverflow.com/a/950146/2279210 — Taras
– Taras, Commented Nov 14, 2024 at 6:57

tcooc · Accepted Answer · 2010-08-28 14:29:55Z

18

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);

edited Aug 28, 2010 at 14:29

answered Jun 27, 2010 at 0:06

tcooc

21.4k3 gold badges42 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jamie Wong Over a year ago

While this may actually work in some browsers, script elements are not required to have an onLoad event handler, so far as I know - w3schools.com/tags/tag_script.asp

tcooc Over a year ago

All browsers except IE have an onload event(kinda predictable). In IE, you need a fallback onreadystatechange function.

Tivac · Accepted Answer · 2010-06-27 06:14:00Z

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.

answered Jun 27, 2010 at 6:14

Tivac

2,57518 silver badges21 bronze badges

Comments

Luke · Accepted Answer · 2010-06-27 06:59:42Z

If you are loading multiple individual script files from the Yahoo! CDN, you'll need to makes sure both are loaded before executing your dependent code. You can avoid this using the combo handler. See the Configurator to get what the script url should be to load both/all needed YUI files from one url.

http://developer.yahoo.com/yui/articles/hosting/

With that in mind, assuming you must load the YUI files asynchronously, you should use an onload/onreadystatechange handler as noted by digitalFresh.

I would recommend the following pattern, however:

(function (d) {
    var s = d.createElement('script'),
        onEvent = ('onreadystatechange' in s) ? 'onreadystatechange' : 'onload';

    s[onEvent] = function () {
        if (("loaded,complete").indexOf(this.readyState || "loaded") > -1) {
            s[onEvent] = null;

            // Call your code here
            YAHOO.util.Dom.get('x').innerHTML = "Loaded";
        }
    };

    // Set the src to the combo script url, e.g.
    s.src = "http://yui.yahooapis.com/combo?2.8.1/...";

    d.getElementsByTagName('head')[0].appendChild(s);
})(document);

Jamie Wong · Accepted Answer · 2010-06-27 01:04:50Z

1

You could use a setTimeout() to run some function that just checks if it's loaded - check something like

if (typeof YUI_NAMESPACED_THING !== "undefined") runCode()

EDIT Thanks, CMS

edited Jun 27, 2010 at 1:04

answered Jun 27, 2010 at 0:04

Jamie Wong

18.4k8 gold badges66 silver badges81 bronze badges

3 Comments

Christian C. Salvadó Over a year ago

The typeof operator always returns a string, the check should be if (typeof YUI_NAMESPACED_THING != "undefined") //...

Luke Over a year ago

This is the wrong way to go about it. Firstly, you're probably thinking of setInterval or a chained setTimeout, since a single setTimeout would either A) delay execution too long causing unnecessarily poor page setup time, or B) fail the race condition created by assuming the scripts would be loaded within a certain time. Something based on onload/onreadystatechange solution is better.

Jamie Wong Over a year ago

@Luke I was thinking of chained setTimeout. But yes, I agree that onload/onreadystatechange is a better solution. I knew that onload didn't work by itself and wasn't aware there was a cross browser solution down that alley. I upvoted digitalFresh's answer

Caridy Patino · Accepted Answer · 2010-06-27 15:06:39Z

0

If I understand this correctly, your ajax response with this:

<script href="yui-combo?1"></script>
<script href="yui-combo?2"></script>
<p>some text here</a>
<script>
// using some of the components included in the previous combos
// YAHOO.whatever here...
</script>

If this is the case, this is a clear case in which you should use dispatcher plugin. Dispatcher will emulate the browser loading process for AJAX responses. Basically it will load and execute every script in the exact order.

Best Regards, Caridy

answered Jun 27, 2010 at 15:06

Caridy Patino

1

Collectives™ on Stack Overflow

Loading scripts dynamically

5 Answers 5

2 Comments

Comments

Comments

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

Comments

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related