Dynamic jquery loading not working on old IE

Question

This is working on modern browsers, but it is not loading jQuery on IE <= 9.0.

Here is the code in the index.html file:

loadJQuery(function () {
    alert('hello');
});

And then on another file (included via <script src>) I have:

    if (typeof(loadJSInclude) == 'undefined') {
 function loadJSInclude(scriptPath, callback)
 {
   var scriptNode = document.createElement('SCRIPT');
   scriptNode.type = 'text/javascript';
   scriptNode.src = scriptPath;

   var headNode = document.getElementsByTagName('HEAD');
   if (headNode[0] != null)
      headNode[0].appendChild(scriptNode);

   if (callback != null)    
   {
     scriptNode.onreadystagechange = callback;            
     scriptNode.onload = callback;
   }
 }

 function loadJQuery(task) {
    if (typeof(jQuery) == "undefined") {
        loadJSInclude('http://code.jquery.com/jquery-latest.min.js', function() {
            $(document).ready(task)
        });
    } else {
        $(document).ready(task);
    }
 }
}

Any idea on why that would not work on IE <= 9.0? I tried adding many alerts to loadJQuery function, and they are all displaying, and my guess is that I am incorrectly adding the node to the head element for the old IEs.

Don't use this type of function declaration in an `if` block, use `window.loadJSInclude=function...`. — Denys Séguret, Apr 10 '13 at 15:33

score 0 · Answer 1 · edited May 23 '17 at 12:04

0

You forgot the ; at the end of $(document).ready(task).

Note that this may not be the actual issue, as JS (technically) doesn't require semi-colons, but it can cause issues, especially when dealing with dynamic content.

Also, 'undefined' and "undefined" do not require quotes.

(removed due to misunderstanding of OP) ~~As for your implementation, see this post~~

Have you tried setting scriptNode.async = true?

Also, have you seen this post? There is no accepted answer, but the OP specifies a solution that did work in IE (but not Chrome). I suggest that you try to adapt that solution, test to see if it still does not work in Chrome, and, if not, we can continue debugging from there. Here is the IE8 solution from the post:

<div id="test">
<p>This is a test.</p>
</div>

<script>
if (typeof jQuery == 'undefined') {
    s = document.createElement("script");
    s.src = "//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js";
    if (s.addEventListener) {
        s.addEventListener("load", runScript, false);
    } else if (s.readyState) {
        s.onreadystatechange = runScript;
    }

} else {
    runScript();
}

function runScript() {
    document.getElementsByTagName('head')[0].appendChild(s);
    $('#test').css('font-size', '50px');

}
</script>

As I said, I did not write this, and I have not tested it, myself.

edited May 23 '17 at 12:04

Community

1
1

answered Apr 10 '13 at 15:41

Zachary Kniebel

4,628
3
24
52

I don't think you are understanding the question at all, that post doesn't help either because it is using jquery to load a javascript, the problem here is to load jquery in the first place. – luqita Apr 10 '13 at 16:10
As I said, these minor bugs may not be the source of the actual issue, but you need to fix them before we proceed, as I cannot debug code when there are already bugs in it. More over, down-voting my answer is not a great way to get my help, nor is it an accurate assessment of my answer, in this situation, as my answer did address three bugs in your code. Now, as no one else seems to be helping you and the reason I participate on SO is to strengthen the community, I will continue to help you. As such, thank you for confirming that these bugs were not the issue. We can now move forward. – Zachary Kniebel Apr 10 '13 at 16:25
I did not downvote you, I am just answering to your post, I do appreciate your help but I cannot lie and tell you that the problem was solved :) – luqita Apr 10 '13 at 16:31
I didn't actually have much faith in that. It's implicitly set by default, but it's better to start by ruling out the easy cases first. – Zachary Kniebel Apr 10 '13 at 16:39

score 0 · Accepted Answer · answered Apr 12 '13 at 02:22

0

A simple solution is to include jQuery like this:

window.jQuery || document.write('<script src="/js/jquery/jquery.js">\x3C/script>');

answered Apr 12 '13 at 02:22

luqita

3,688
10
54
92

Dynamic jquery loading not working on old IE

2 Answers2