Cant add jquery to the head dynamically and run jquery code

Question

I have got this code:

function init(){
    if (typeof window.jQuery !== 'function') {
        var link = document.createElement('script');
        link.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js';
        document.getElementsByTagName('head')[0].appendChild(link);
    }
}

window.onload = init;

 if (typeof window.jQuery === 'function')  {
    $(document).ready(function(){
        alert(1);
    });
}

What I am trying to do is to add jquery script link to the head if jQuery doesnt exist and then run the code. What could be best is to check whether jquery exists in the head as soon as possible and then add a link to the source. But I dont know how to achieve so?

UPDATE: An alternative approach would be using a function:

  function init(){
   if (typeof window.jQuery !== 'function') {
      var link = document.createElement('script');
      link.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js';
      document.getElementsByTagName('head')[0].appendChild(link);
      start_code();
   }
   else{
       start_code();
   }
}  
window.onload = init;
function start_code(){
           $(document).ready(function(){
                alert(1);
           });
     }

I could basically call a function after everything is loaded.. But this doesnt work well. cause the $ is not defined error is being thrown too

typeof jQuery will never be "defined"

Bobby Jack
– Bobby Jack

2012-07-03 07:49:34 +00:00
Commented Jul 3, 2012 at 7:49 — Bobby Jack
– Bobby Jack, Commented Jul 3, 2012 at 7:49
okay see update.. i made a few changes

Dmitry Makovetskiyd
– Dmitry Makovetskiyd

2012-07-03 07:51:50 +00:00
Commented Jul 3, 2012 at 7:51 — Dmitry Makovetskiyd
– Dmitry Makovetskiyd, Commented Jul 3, 2012 at 7:51

Fabrizio Calderan · Accepted Answer · 2012-07-03 08:01:08Z

3

function init(){
   if (typeof window.jQuery !== 'function') {
      var link = document.createElement('script');
      link.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js';
      document.getElementsByTagName('head')[0].appendChild(link);
   }
}

or use the HTML5 boilerplate approach

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

placing this script at the bottom of the page (for performance purpose). Then, if you need to use jQuery function before, just take a look at this resource: stop paying your jQuery tax

since document.write here is creating a script block (which is synchronous) all you have to do is simply

<script>window.jQuery || document.write('<script src="/js/vendor/jquery-1.7.2.min.js"><\/script>')</script>
<script>
    $(document).ready(function(){
        alert(1);
    });
</script>

edited Jul 3, 2012 at 8:01

answered Jul 3, 2012 at 7:47

Fabrizio Calderan

124k26 gold badges171 silver badges183 bronze badges

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

6 Comments

Dmitry Makovetskiyd Over a year ago

That doesnt work. I also want to mention that that javascript code sits in the body of the html and not in the head

Dmitry Makovetskiyd Over a year ago

the alert isnt triggered. could I include that script tag in the body instead of html..would it work?

Fabrizio Calderan Over a year ago

jsfiddle.net/YYKWL/2 your alert is never triggered because 1) if(typeof jQuery == 'defined') is not a valid condition; 2) the loading of jquery is asynchronous so the library is not soon ready

Dmitry Makovetskiyd Over a year ago

okay that worked. But why did you say it is html5? i dont see any html5 in there

Dmitry Makovetskiyd Over a year ago

Thanks, the script now sits below at the footer.. I didnt know that you could put a script link in the body

|

Collectives™ on Stack Overflow

Cant add jquery to the head dynamically and run jquery code

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related