Best IT Recipes

How to load jQuery if it is not already loaded?

I have initializor.js which contains the following:

if(typeof jQuery=='undefined') { var headTag = document.getElementsByTagName("head")[0]; var jqTag = document.createElement('script'); jqTag.type = 'text/javascript'; jqTag.src = 'jquery.js'; headTag.appendChild(jqTag); }

Then I include this file somewhere on another page. The code checks to see if jQuery is loaded, and if not, add it to the Head tag.

However, jQuery is not initialized because in my main document I have several events declared only to verify this. I also tried writing jQuery code below validation, and Firebug said that "jQuery is undefined". Is there any way to do this? Firebug shows jquery inclusion tag in title tag!

Also, can I dynamically add code to the $ (document) .ready () event? Or didn't you just need to add some Click events to multiple elements?

+35
javascript jquery dynamic
Jul 25 2018-11-11T00:
source share
6 answers

jQuery is not available right away when you load it asynchronously (adding it to <head> ). You will need to add the onload listener to the script ( jqTag ) to determine when it loads, and then run your code.

eg.

 function myJQueryCode() { //Do stuff with jQuery } if(typeof jQuery=='undefined') { var headTag = document.getElementsByTagName("head")[0]; var jqTag = document.createElement('script'); jqTag.type = 'text/javascript'; jqTag.src = 'jquery.js'; jqTag.onload = myJQueryCode; headTag.appendChild(jqTag); } else { myJQueryCode(); }
+46
Jul 25 '11 at 8:28
source share

To enable jQuery you should use this:

 <script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script>window.jQuery || document.write('<script src="jquery.js">\x3C/script>')</script>

it uses the Google CDN, but provides a fallback and has a relative protocol URL.

Note Be sure to change the version number to the latest version.



if window.jQuery defined, it will not continue to read the string, since it is or already contains the true value, if not, then it (document.) will write the value
see: theHTML5Boilerplate

also: you forgot quotes if jQuery is not defined:

 typeof window.jQuery === "undefined" //true typeof window.jQuery == undefined //false ,this is wrong

You also can:

 window.jQuery === undefined //true
+29
Jul 25 2018-11-11T00:
source share

Refactoring Adam Heath's answer (this is more readable IMO). In the end, you need to run jQuery code AFTER jQuery has finished loading.

 jQueryCode = function(){ // your jQuery code } if(window.jQuery) jQueryCode(); else{ var script = document.createElement('script'); document.head.appendChild(script); script.type = 'text/javascript'; script.src = "//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"; script.onload = jQueryCode; }

Or you can also wrap it in a function to reorder the code

 function runWithJQuery(jQueryCode){ if(window.jQuery) jQueryCode(); else{ var script = document.createElement('script'); document.head.appendChild(script); script.type = 'text/javascript'; script.src = "//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"; script.onload = jQueryCode; } } runWithJQuery(function jQueryCode(){ // your jQuery code })

Or, if you are in an asynchronous function, you can simply use await instead, like this

 if(!window.jQuery){ var script = document.createElement('script'); document.head.appendChild(script); script.type = 'text/javascript'; script.src = "//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"; await script.onload } // your jQuery code here
+9
Feb 02 '17 at 21:59
source share

The YepNope bootloader can be used to conditionally load scripts, it has nice, easy-to-read syntax, it has an example of exactly this on its website.

You can get it from your website .

Example taken from your website:

  yepnope([{ load: 'http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js', complete: function () { if (!window.jQuery) { yepnope('local/jquery.min.js'); } } }
+2
Jul 25 2018-11-11T00:
source share

This site code solves my problem.

 function loadjQuery(url, success){ var script = document.createElement('script'); script.src = url; var head = document.getElementsByTagName('head')[0], done = false; head.appendChild(script); // Attach handlers for all browsers script.onload = script.onreadystatechange = function() { if (!done && (!this.readyState || this.readyState == 'loaded' || this.readyState == 'complete')) { done = true; success(); script.onload = script.onreadystatechange = null; head.removeChild(script); } }; } if (typeof jQuery == 'undefined'){ loadjQuery('http://code.jquery.com/jquery-1.10.2.min.js', function() { // Write your jQuery Code }); } else { // jQuery was already loaded // Write your jQuery Code }

http://99webtools.com/blog/load-jquery-if-not-already-loaded/

0
Nov 12 '15 at 15:17
source share

This is an old post, but I am creating one workable solution, tested in different places.

Here is the code

 <script type="text/javascript"> (function(url, position, callback){ // default values url = url || 'https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'; position = position || 0; // Check is jQuery exists if (!window.jQuery) { // Initialize <head> var head = document.getElementsByTagName('head')[0]; // Create <script> element var script = document.createElement("script"); // Append URL script.src = url; // Append type script.type = 'text/javascript'; // Append script to <head> head.appendChild(script); // Move script on proper position head.insertBefore(script,head.childNodes[position]); script.onload = function(){ if(typeof callback == 'function') { callback(jQuery); } }; } else { if(typeof callback == 'function') { callback(jQuery); } } }('https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js', 5, function($){ console.log($); })); </script>

You can find the explanation HERE .

0
Mar 13 '18 at 12:52
source share


More articles:


All Articles