Fallback for jQuery UI from google CDN

Question

Html5 Boilerplate uses the following trick for fallback to locally stored JQuery if grabbing it from Google CDN fails:

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

How would you implement this trick to perform the same trick for jQuery UI?

Answer 1

<script type="text/javascript">!window.jQuery.ui && document.write(unescape('%3Cscript src="path to jquery UI lib'))</script>

Do this after the fallback for jQuery itself.

Or (if you don't like the !)

<script type="text/javascript">(window.jQuery.ui === /* notice the === */ undefined) && document.write( /* ... */)</script>

Detecting an undefined object property

Answer 2

I do it like this:

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


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

Answer 3

Using the ASP.NET Web Optimization Framework

Easier way to do it when you're using bundles.

Get the Microsoft.AspNet.Web.Optimization package from NuGet. Now in your BundleConfig you can setup your bundles to include not only the CdnPath, but also a CdnFallbackExpression:

public static void RegisterBundles(BundleCollection bundles)
{
    bundles.UseCdn = true;
    BundleTable.EnableOptimizations = true;     
    var jquery = new ScriptBundle("~/bundles/jquery", "//ajax.aspnetcdn.com/ajax/jquery/jquery-2.0.0.min.js").Include(
            "~/Scripts/jquery-{version}.js");
    jquery.CdnFallbackExpression = "window.jQuery";
    bundles.Add(jquery);
    //...
}