Jquery .ajax loading scripts in wrong order

Question

The setup at the moment is the following:

On clicking a link, the following code is executed:

$("#main-content").load(url);

The url we're loading into main-content is mostly html, with 3 script tags at the top and 3 script tags at the bottom (that are loaded).

The code itself works fine and there are no problems locally, but once we pushed the site live and added a CDN, the Javascript started failing. After further examination it appears the scripts aren't loaded in serial by JQuery. Even though we've defined the scripts like:

<script type="text/javascript" src="a.js"></script>
<script type="text/javascript" src="b.js"></script>
<script type="text/javascript" src="c.js"></script>

a.js has a bigger latency than b.js and is evaluated later, thus producing a JS error.

I know that JQuery parses out the JS files and attaches them into the dom itself, but I thought it did this in serial. Has anyone encountered this problem before or has any idea on how to fix it?

• Matt Moore: Check this out. stackoverflow.com/questions/6295305/… Hopefully this helps.
• Peeter: JQuery interally loads parses the HTML that is returned, strips out the script tags and adds them to the dom itself.

Answer 1

I found the reason. JQuery parses out all script tags, gets the source via an AJAX request and evals it. This leads to the fact that whichever AJAX requests finishes first, will be evaled first. Since the CDN returned b.js before a.js, the code broke.

As a work-around, use either yepnope.js to load in parallel but execute in serial. Or use requirejs.