Using a Javascript Loader with jQuery "undefined"

Question

I am using a Javascript Loader [ requireJS ] which loads scripts in parallel to content - however, I have a problem. i.e.

require('http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js');

Typically - as a 'backup' - I've used

<script type="text/javascript">
  if (typeof jQuery == 'undefined') {
    document.write(unescape("%3Cscript src='/scripts/jquery-1.4.4.min.js' type='text/javascript'%3E%3C/script%3E"));
  }
</script>

However, when using a java-script loader - this will ALWAYS render jQuery "undefined" - because JS and content is loaded in parallel.

The effect is basically that you are loading jQuery 2x - i.e. 1x through your javascript loader and 1 through "jquery == undefined".

How can I make the "backup" work with a javascript loader ?

ok .... figured it out :P - basically you just insert a local copy within the same tags NOT using 'document.write' because it's not allowed in requireJS i.e. like `` — Tom, Jun 27 '11 at 05:52
So you are loading the one from google parallel to your content? But how would the javascript in the content be parsed if the Jquery isn't yet loaded? The one in the require will always be 'late', so you'd always need the backup? You could do the same backup in the parallel (so: check if your backup has allready loaded it: if so, don't load again), but frankly I don't see how loading jquery "in parallel" could work. — Nanne, Jun 27 '11 at 05:52
possible duplicate of [requireJS and jQuery](http://stackoverflow.com/questions/4535926/requirejs-and-jquery) — mplungjan, Jun 27 '11 at 05:54
@mplungjan - not a duplicate - totally different question. i am asking if the library fails to LOAD at all - how to "ensure" it loads. that question isn't asking that. @nanne - yeah managed to figure it out :) — Tom, Jun 27 '11 at 05:55

score 1 · Answer 1 · edited Jun 20 '20 at 09:12

As far as I know, requirejs is usually used like this:

require(['http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js'],
    function() {
        // Code that depends on jQuery here.
    }
);

Function that depends on jQuery will be called only when jQuery is loaded. But if jQuery fails to load, code that depends on it will never be executed.

Since you want to try and use local jQuery in this case, you should probably catch the script load timeout error and try to load jQuery from another source. (But note that timeout errors are slow.)

There's little information on error handling in docs:

To detect errors, you can override require.onError() to get errors. The error object passed to the onerror function will contain two properties if it is a timeout issue:

requireType: value will be "timeout"

requireModules: an array of module names/URLs that timed out.

I think, the code may look like this (not tested):

var functionThatDependsOnJquery = function() {
    // Code that depends on jQuery here.
};

require.onError = function(err) {
    # If we have Google jQuery load timeout...
    if (err.requireType = "timeout" &&
        err.requireModules.indexOf('http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js') != -1
        ) {
        # ...we'll try to load it from another source.
        require(['/scripts/localJquery'], functionThatDependsOnJquery);
    }
    # We have another script load timeout, so we just throw an error
    # as requirejs normally does.
    else { throw err; }
};

# Try to load Google jQuery.
require(['http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js'],
    functionThatDependsOnJquery);

Using a Javascript Loader with jQuery "undefined"

1 Answers1