CODEWITHSUNDEEP
javascriptjquerydatatablescdnfallback
Alfred Wallace
Alfred Wallace

Reputation: 2014

CDN fallback for DataTables.js

I am trying to write a CDN fallback for datatables.min.js -- somehow, I couldn't find any on Google or on datatables.net. After reading this StackOverflow post and this DataTables post, I came up with this unsuccessful piece (even tried various expressions as shown):

<script>
    if (typeof jQuery.fn.dataTable === 'undefined') {
        document.write('<script src="~/scripts/datatables.min.js"><\/script>');            
        //document.write('<script src="~/scripts/datatables.min.js">\x3C/script>'); //same
        //document.write('\x3Cscript src="~/scripts/datatables.min.js"\x3E\x3C/script\x3E'); //same
    }
</script>

For troubleshooting, I loaded datatables.min.js directly and got these two confusing results:

1/ I get undefined (BAD) from this:

<script>
    document.write('<script src="~/scripts/datatables.min.js"><\/script>');
</script>
<script>
    alert(typeof jQuery.fn.dataTable);
</script>

2/ ... but somehow I get function (GOOD) from that:

<script src="~/scripts/datatables.min.js"></script>
<script>
    alert(typeof jQuery.fn.dataTable);
</script>

That looks the same to me, especially since document.write uses synchronous loading. I also tried a pure DOM method but no luck.

What am I missing with document.write?

Upvotes: 1

Views: 528

Answers (3)

Alfred Wallace
Alfred Wallace

Reputation: 2014

A correct CDN fallback for DataTables following accepted fallback practices is:

<script>
    if (typeof jQuery.fn.dataTable === 'undefined') {
        document.write('\x3Cscript src="/scripts/datatables.min.js"\x3E\x3C/script\x3E');
        //document.write('<script src="/scripts/datatables.min.js"><\/script>');
    }
</script>

or simply

<script>window.jQuery.fn.dataTable || document.write('\x3Cscript src="/scripts/datatables.min.js"\x3E\x3C/script\x3E')</script>

The tilda / relative path in src="" was the problem, as suggested by @ParthTrivedi (see comments). Per this post, "when in script, paths are relative to displayed page".

Upvotes: 1

Arvin
Arvin

Reputation: 1260

In your code document.write and alert will process at the very same time, please realize that the alert will be done by the time "database.min.js" will be available.

Use $(document).ready() or winidow.onload and you will see expected results.

Though read the best practices, pros and cons here before doing this -

http://www.stevesouders.com/blog/2012/04/10/dont-docwrite-scripts/

I will recommend using RequireJS to do this efficiently as described by Scott Hanselman, please go through the below link before attempting to it as he talks about CDN fallback in detail and has covered every aspect of it -

http://www.hanselman.com/blog/CDNsFailButYourScriptsDontHaveToFallbackFromCDNToLocalJQuery.aspx

Hope it will help and will give you solid base to find correct directions.

Upvotes: 1

Parth Trivedi
Parth Trivedi

Reputation: 3832

Try this

    <script>
    if (typeof jQuery.fn.dataTable === 'undefined') {
        $.getScript(baseURL + '/scripts/datatables.min.js?' + Math.random(), function () {
            //do stuff here
            alert(typeof jQuery.fn.dataTable);
        });
    }
    </script>

Upvotes: 1

Related Questions