Loading jQuery on-the-fly

Question

I can't figure out what is wrong with my code here. I am trying to load jQuery dynamically if it is not present on the page.

<head>
  <script>
     (function() {
         if (typeof jQuery != 'undefined') {
         /* jQuery is already loaded... verify minimum version number of 1.4.2 and reload newer if needed */
         if (/1\.(0|1|2|3|4)\.(0|1)/.test(jQuery.fn.jquery) || /^1.1/.test(jQuery.fn.jquery) || /^1.2/.test(jQuery.fn.jquery)|| /^1.3/.test(jQuery.fn.jquery)) {
         loadJQ();
         }
      } else {
           loadJQ();
        }

    function loadJQ() {
    /* adds a link to jQuery to the head, instead of inline, so it validates */ 
    var headElement = document.getElementsByTagName("head")[0];
    linkElement=document.createElement("script");
    linkElement.src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js";
    linkElement.type="text/javascript";
    headElement.appendChild(linkElement);
   //alert(headElement);
   }

   })();

  </script>
</head>

This is my body.

 <body>
   <button>Click me</button>
   <script type="text/javascript">
     $(document).ready(function(){
   alert("hello");
     $("button").click(function(){
     $(this).hide();
    });
   });
   </script>
 </body>

When I put this in a html page I get an error saying that "$ is not defined". Anyone has any idea why?

The reason I want to do this to clean up my site. There 150 pages and most of them are using different jQuery version on my site. Some pages don't have jQuery. Before I include this in my header and push it site wide, I don't want to cause any error by using multiple version of jQuery on a page and causing unexpected results. — N V, Jan 06 '12 at 20:01

score 3 · Answer 1 · answered Jan 06 '12 at 19:54

3

"$ is not defined" error means that jquery is not loaded.

Try this script to load the jquery.

http://css-tricks.com/snippets/jquery/load-jquery-only-if-not-present/

answered Jan 06 '12 at 19:54

Mandeep Pasbola

2,631
2
26
50

1

Yes he knows that. He wants _this_ script fixed so that jQuery _is_ loaded. – Lightness Races in Orbit Jan 06 '12 at 19:59

score 2 · Answer 2 · answered Jan 06 '12 at 19:56

"$ is not defined" error results from jQuery code not being downloaded by the time the script tries to execute.

You can try using the Script attribute defer to delay the execution of your code until it is loaded by changing the script tag to

  <script type="text/javascript" defer="defer">

score 0 · Accepted Answer · answered Jan 11 '12 at 19:46

With help of one my friend, found what is the problem with above code.

When the document.ready runs, jquery is not on the page (there are two onReady elements running)… and since the addToHead version is non-blocking, the rest of the javascript executes in parallel and fails.

I added this just after the body tag starts and it works fine:

<script type="text/javascript">
   if (typeof jQuery == 'undefined') {
     document.write('<scr'+'ipt type="text/javascript" src="http://ajax.googleapis.com /ajax/libs/jquery/1.7.1/jquery.min.js">'+'</scr'+'ipt>');
  }
</script>

Loading jQuery on-the-fly

3 Answers3

Linked