0

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?

Peeter
  • 9,282
  • 5
  • 36
  • 53
  • 1
    Check this out. http://stackoverflow.com/questions/6295305/php-jquery-ajax-calls-out-of-order Hopefully this helps. – Matt Moore Apr 19 '12 at 15:10
  • JQuery interally loads parses the HTML that is returned, strips out the script tags and adds them to the dom itself. – Peeter Apr 19 '12 at 16:27

1 Answers1

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.

Peeter
  • 9,282
  • 5
  • 36
  • 53