Script does not function when dynamically including jQuery

Question

I've got a script that I'm trying to modify so that I don't load the jQuery library if its already present. However, the only way I can get things to work is example 1 below (explictly loading the jQuery library). When I try to conditionally load it, the slider does not work...

Example #1 - the slider works fine in this example (but jQuery may be loaded multiple times)

<head>
    <script type='text/javascript' src='scripts/js/jquery-1.4.2.min.js'></script>
    <script type='text/javascript' src='scripts/js/slider/jquery.slider.js'></script>
    <script type='text/javascript'>
        jQuery(document).ready(
            function(){
                jQuery('#accordion-1').slider({
                    autoStart:true,
                    slideInterval:5000,
                    slideNum:false
                });
            })
    </script>
</head>

Example #2 - Trying to dynamically load jQuery. Slider does not work.

<head>
    <script type='text/javascript'>
        if (typeof jQuery == 'undefined') {  
            // jQuery is not loaded => load it:
            var script = document.createElement('script');
            script.type = 'text/javascript';
            script.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js';
            document.getElementsByTagName('body')[0].appendChild(script);
        }
    </script>

    <script type='text/javascript' src='scripts/js/slider/jquery.slider.js'></script>
    <script type='text/javascript'>
        jQuery(document).ready(
            function(){
                jQuery('#accordion-1').slider({
                    autoStart:true,
                    slideInterval:5000,
                    slideNum:false
                });
            })
    </script>
</head>

Example #3 - This does not work either...

<head>
    <script type="text/javascript">
        if (typeof jQuery == 'undefined') {  
            document.write(unescape('%3Cscript src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"%3E%3C/script%3E'));
        }
    </script>
    <script type='text/javascript' src='scripts/js/slider/jquery.slider.js'></script>
</head>

score 2 · Answer 1 · edited May 23 '17 at 10:33

The problem is that you are appending the jQuery script to the end of the body. This is after the script elements that use jQuery. That obviously won't work, since scripts are evaluated sequentially.

You should use document.write instead (one of the rare occasions where that is correct):

document.write(unescape('%3Cscript src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"%3E%3C/script%3E'));

The unescape code is the easy way around the fact that </script> will cause errors if inserted directly into Javascript.

This code inserts the script tag right at the current point in the document. (Credit to this SO answer.)

Thanks, but its still not working. See my updated question (Example #3) — Scott B, Jul 15 '11 at 19:31

score 1 · Accepted Answer · answered Jul 15 '11 at 17:12

You have to basically wait for the script to load. Please take a look at the below code.

<script type='text/javascript'>
        function initSlider(){
            jQuery(document).ready(
            function(){
                jQuery('#accordion-1').slider({
                    autoStart:true,
                    slideInterval:5000,
                    slideNum:false
                });
            })
        }
        if (typeof jQuery == 'undefined') {  
            // jQuery is not loaded => load it:
            var script = document.createElement('script');
            script.type = 'text/javascript';
            script.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js';
            script.onreadystatechange= function () {//This is for IE
               if (this.readyState == 'complete'){ initSlider(); };
            }
            script.onload= initSlider;//This is for Non-IE
            document.getElementsByTagName('body')[0].appendChild(script);
        }
    </script>

I don't think this is a working answer because as far as I know you should not use "script.onload" You should really be using script.addEventListener('load', initSlider, false); and I'm pretty sure the readyState you are looking for is 'loaded' and not 'complete.' Further on that, are we not looking for a numeric value returned to readyState, in this case 2 for 'loaded' or 4 for 'complete?' — Tomas, Feb 03 '13 at 06:27

score 0 · Answer 3 · answered Jul 15 '11 at 16:42

0

Instead try:

    var script = document.createElement("script");

script.type = "text/javascript";
script.src = "http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js";

document.body.appendChild(script);

answered Jul 15 '11 at 16:42

Chris Lucian

1,013
6
15

score 0 · Answer 4 · answered Jul 15 '11 at 16:42

document.getElementsByTagName('body')[0].appendChild(script);

Won't work before your body element has been added to the DOM. Try just:

    <script type="text/javascript">
        if(!window.jQuery)
            document.write('<script src="jquery.js.php"><\/script>');
    </script>

Script does not function when dynamically including jQuery

4 Answers4