Load jquery dynamically before using jquery

Question

My script will be using as widget in third-party website so i don't aware about jquery loaded and which version of jquery loaded or not at third-party end.

So Before loading below script i want to check is there already latest jquery 1.11.1 loaded after dom ready if not then i want to load the jquery latest and run below script.

script.js

   var $ = jQuery.noConflict( true );
             (function( $ ) {
                   $(document).ready(function() {
                       alert("Document Ready ");
                     });
            })($jy);

EDIT 1

var addNewJQuery = function() {
    (function( $ ) {
       $jy = $;
       var invokeOriginalScript;

      $(document).ready(function() {
            ......my code here.....
     }):
  })(jQuery);

}

AWolf · Accepted Answer · 2015-02-23 16:37:09Z

1

Not sure if this is working for you, but it looks like it is working.

Maybe you need to remove the other script from your header after you loaded the second jQuery file. But it seems to work with both scripts loaded.

I've also added a check if jQuery is loaded at all, if not it will load jQuery.

You can also find the same code in this fiddle.

var addNewJQuery = function() {
    //var jQ = jQuery.noConflict(true);
    (function ($) {
        $(document).ready(function () {
            alert("You are now running jQuery version: " + $.fn.jquery);
        });
    })(jQuery);
};

if ( typeof jQuery === 'undefined' ) {
    alert('no jQuery loaded');
    //throw new Error("Something went badly wrong!"); // now you could load jQuery
    loadScript('https://code.jquery.com/jquery-1.11.2.js', addNewJQuery);
}

if ($.fn.jquery !== '1.11.2') {
    console.log('detected other jQuery version: ', $.fn.jquery);
    loadScript('https://code.jquery.com/jquery-1.11.2.js', addNewJQuery);
}


function loadScript(url, callback)
{
    // Adding the script tag to the head as suggested before
    var head = document.getElementsByTagName('head')[0];
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = url;

    // Then bind the event to the callback function.
    // There are several events for cross browser compatibility.
    script.onreadystatechange = callback;
    script.onload = callback;

    // Fire the loading
    head.appendChild(script);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

answered Feb 23, 2015 at 16:37

AWolf

9,0105 gold badges38 silver badges43 bronze badges

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

4 Comments

Yatin Mistry Over a year ago

i need to use var jQ = jQuery.noConflict(true); because my widget also using other js library which use jQ that depends on jquery and if 3rd party webiste also using the same library then it creates a problem so i have used it and replcaced $jQ in other libraries

Yatin Mistry Over a year ago

How can i use var jQ = jQuery.noConflict(true); with your given code?

AWolf Over a year ago

What script do you want to run with the newly loaded jQuery? Can you please create a jsFiddle to show the problem?

AWolf Over a year ago

It's difficult to read your page in the browser source code window. But I can't see that you've loaded requirejs in your page or have I missed it.

Collectives™ on Stack Overflow

Load jquery dynamically before using jquery

EDIT 1

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

EDIT 1

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related