1

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 ?

4
  • 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 <script type="text/javascript"> if (typeof jQuery == 'undefined') { require('/scripts/jquery.js'); } </script> Commented Jun 27, 2011 at 5: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. Commented Jun 27, 2011 at 5:52
  • possible duplicate of requireJS and jQuery Commented Jun 27, 2011 at 5: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 :) Commented Jun 27, 2011 at 5:55

1 Answer 1

1

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);
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.