Include jQuery using code

Question

I must include jQuery in a page using code:

if (typeof window.jQuery === "undefined") {
    document.write('<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"><\/script>');
    if (typeof Prototype !== "undefined") {
        document.write('<script>jQuery.noConflict();<\/script>');
    }
}

But then if I try to use jQuery, Firebug logs "jQuery undefined".

jQuery(document).ready(function() {
    //
});

but jquery is correctly loaded

jQuery

The code is in a external javascript file included with <script> — mcont
– mcont, Commented Sep 1, 2012 at 20:07
Please read this and this - these days document.write is really mad function, giving you unexpected results — Peter
– Peter, Commented Sep 1, 2012 at 20:10

Musa · Accepted Answer · 2012-09-01 20:20:25Z

3

I would suggest against using document.write, use dom manipulation.

if (typeof window.jQuery === "undefined") {
    var script = document.createElement('script');
    script.onload = function(){
        if (typeof Prototype !== "undefined") {
            jQuery.noConflict();
        }
    }
    script.src = 'http://code.jquery.com/jquery-latest.min.js';
    document.getElementsByTagName('head')[0].appendChild(script);   
}

http://jsfiddle.net/ALCDr/

edited Sep 1, 2012 at 20:20

answered Sep 1, 2012 at 20:11

Musa

97.9k17 gold badges123 silver badges144 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Peter Over a year ago

I just tried and that doesn't work. I think as long he is getting script from external resource he need to use window.onload as in Rob answer

Peter Over a year ago

@Musa checked, still not working... However it's nice that works to OP :)

Musa Over a year ago

@PeterSzymkowski the script needs time to load, that's why that's why the check for Prototype is in the onload function

Peter · Accepted Answer · 2012-09-01 20:17:35Z

1

window.onload = function() {
  jQuery(document).ready(function() {
    alert('!');
  });
}

do the trick.

answered Sep 1, 2012 at 20:17

Peter

17k9 gold badges55 silver badges77 bronze badges

Comments

Alexander Wigmore · Accepted Answer · 2012-09-01 23:59:21Z

1

The way the HTML5 boilerplate does it is the most efficient way.

<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.8.0.min.js"><\/script>')</script>

This will check to see if jQuery has been defined yet (I.e loaded), or (if not) it will load write the script to the page :).

answered Sep 1, 2012 at 23:59

Alexander Wigmore

3,1864 gold badges41 silver badges60 bronze badges

Collectives™ on Stack Overflow

Include jQuery using code

3 Answers 3

3 Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Linked

Related