1

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?

Improve this question
6
  • You are inserting script inside script in <script> document.write('<script src="~/scripts/datatables.min.js"><\/script>'); </script> Commented Dec 31, 2015 at 4:37
  • use $.getScript('~/scripts/datatables.min.js?' + Math.random(), function () { }); to load script dynamically. Commented Dec 31, 2015 at 4:40
  • The document.write method has been commonly used and recommended - e.g. see CDN fallback for jQuery (stackoverflow.com/questions/5257923/…). I don't think it is the problem. Commented Dec 31, 2015 at 4:42
  • @ParthTrivedi - I tried $.getScript but it does not work either. It even returns a new 404 Not Found error. Commented Dec 31, 2015 at 4:46
  • 1
    May be problem with "~/scripts/datatables.min.js" path. It can't find it and getting 404. Can you please verify path. Commented Dec 31, 2015 at 4:50

3 Answers 3

Reset to default
1

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

4 Comments

This does not work and returns a 404 Not Found error followed by undefined.
I have change URL. Please check. Try to give full Url Path. May be problem with relative url "~/".
Nice catch! Per stackoverflow.com/questions/2188218/…, "When in script, paths are relative to displayed page..." Tilda / relative URL does not work in script. Your solution works but with a delay compared to the corrected document.write technique.
@Alfred is this answer help full to you? then do vote.
1

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.

Improve this answer

2 Comments

I disagree when you say that document.write and alert() process at the same time. document.write is synchronous loading and executes outside of the script. Following that, alert() is processed, therefore after document.write has been executed. Therefore, $(document).ready() is not the way to go for loading a plugin since it will be missing while loading the page and generate errors. document.write is an accepted and recommended method for CDN fallbacks - see references above.
Agree, Scott Hanselman has it the way you needed as outlined in his post in my answers above. <script src="ajax.aspnetcdn.com/ajax/jquery/…> <script> if (typeof jQuery == 'undefined') { document.write(unescape("%3Cscript src='/js/jquery-2.0.0.min.js' type='text/javascript'%3E%3C/script%3E")); } </script> Though you may like his post for alternatives and other for performance perspective.
1

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".

Improve this answer

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.