How to load local script files as fallback in case

Question

This question already has an answer here:

• Best way to use Google's hosted jQuery, but fall back to my hosted library on Google fail 22 answers

I’m using a CDN for the following javascript:

• https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js
• https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/jquery-ui.min.js
• http://ajax.aspnetcdn.com/ajax/mvc/3.0/jquery.validate.unobtrusive.min.js
• http://ajax.aspnetcdn.com/ajax/jquery.validate/1.7/jquery.validate.min.js

For each one, how can I revert to using local copy in the instance where it may be blocked/unavailable?

Answer 1

To confirm that cdn script loaded you can check for existence any variable/function this script defines, if it is undefined - then cdn failed and you need to load local script copy.

On this principle are based solutions like that:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.5.1.min.js">\x3C/script>')</script>

(if there is no window.jQuery property defined cdn script didn't loaded).

You may build your own solutions using this method. For instance, jquery tooltip plugin creates $.tooltip() function so we can check it with code like this:

<script>
    if (typeof $.tooltip === 'undefined') {
        document.write('<script src="js/libs/jquery.tooltip.min.js">\x3C/script>');
    }
</script>

Answer 2

The following solution passes validation for both HTML5, XHTML 1.0 Transitional and other HTML flavors. Place the following after each of your external JQuery call. Be sure to replace jquery.min.js with the path to your local copy of the JQuery script.

<script type="application/javascript">window.jQuery || 
document.write(unescape('%3Cscript src="jquery.min.js"%3E%3C/script%3E'))</script>

If you don't use unescape, you'll have errors when validating with http://validator.w3.org since "%" is not allowed in an attribute specification list.

The HTML5 Boilerplate example also has validation errors when used with older HTML:

1. required attribute "type" not specified
2. character "&" is the first character of a delimiter but occurred as data

You'll be fine with the HTML5 Boilerplate solution if you are developing only for HTML5 and future HTML flavors, but since you may find yourself inserting portions of your code into legacy HTML, play it safe with this one-size-fits-all approach.

You'll need to specify a different function for each externally hosted script. For instance, the JQuery Tooltip plugin creates the $.tooltip() function, so you can check it with the following:

<script type="application/javascript">typeof ($.tooltip()) !== 'undefined' || 
document.write(unescape('%3Cscript src="jquery.tooltip.min.js"%3E%3C/script%3E'))</script>

Answer 3

<script src="http://ajax.aspnetcdn.com/ajax/mvc/3.0/jquery.validate.unobtrusive.min.js" type="text/javascript"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.7/jquery.validate.min.js" type="text/javascript"></script>   
<script type="text/javascript">
if(typeof jQval == 'undefined')
{
    document.write(unescape("%3Cscript src='/Scripts/jquery.validate.unobtrusive.min.js' type='text/javascript'%3E%3C/script%3E"));
    document.write(unescape("%3Cscript src='/Scripts/jquery.validate.min.js' type='text/javascript'%3E%3C/script%3E"));
}
</script>

Taken from this article

Answer 4

I would have looked into a plugin like yepnopejs

yepnope([{
  load: 'http:/­/ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js',
  complete: function () {
    if (!window.jQuery) {
      yepnope('local/jquery.min.js');
    }
  }
}]);

Takes an array of object to check for, check the documentation at the site

Answer 5

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
<script>!window.jQuery && document.write(unescape('%3Cscript src="js/libs/jquery-1.4.2.js"%3E%3C/script%3E'))</script>

Taken from HTML5 Boilerplate.

Answer 6

first thing - shouldn't you include them in different order?

something like this should work:

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/mvc/3.0/jquery.validate.unobtrusive.min.js"></script>
<script>jQuery.fn.validate || document.write('<script src="js/jquery.validate.min.js">\x3C/script><script src="js/jquery.validate.unobtrusive.min.js">\x3C/script>'</script>

what I'm doing here is simply checking if the first plugin (jQ validate) has been loaded. by checking for a static validate function on jQuery.fn object. I can't check the second script same way, because it's not adding anything anywhere, just proxying existing methods, so it's easier to assume that if the first one works, the second one will work too - after all, they are provided by the same CDN.