How to Use Multiple Versions of Jquery on the Same Page

Can I use multiple versions of jQuery on the same page?

Yes, it's doable due to jQuery's noconflict mode. http://blog.nemikor.com/2009/10/03/using-multiple-versions-of-jquery/

<!-- load jQuery 1.1.3 -->
<script type="text/javascript" src="http://example.com/jquery-1.1.3.js"></script>
<script type="text/javascript">
var jQuery_1_1_3 = $.noConflict(true);
</script>

<!-- load jQuery 1.3.2 -->
<script type="text/javascript" src="http://example.com/jquery-1.3.2.js"></script>
<script type="text/javascript">
var jQuery_1_3_2 = $.noConflict(true);
</script>

Then, instead of $('#selector').function();, you'd do jQuery_1_3_2('#selector').function(); or jQuery_1_1_3('#selector').function();.

Multiple versions of JQuery on the same page

yes you can do it like this:

  <script type="text/javascript" src="jquery-1.1.3.js"></script>
  <script> $113 = jQuery.noConflict();</script>
  <script type="text/javascript" src="jquery-1.4.2.js"></script>

and then use either $113 or $ in your code

How to use 2 different versions of jquery in same html

you can use .noConflict() for this

<!-- load jQuery 1_8_3 -->
    <script  src="../assets/js/jquery-1.8.3.min.js"></script> 
        <script type="text/javascript">
        var jQuery_1_8_3 = $.noConflict(true);
        </script>

        <!-- load jQuery 1.4.2 -->
        <script type="text/javascript" src="jquery/jquery-1.4.2.js"></script>
        <script type="text/javascript">
        var jQuery_1_4_2= $.noConflict(true);
        </script>

see here

JQuery noConflict running two versions

As jQuery API says so,

If for some reason two versions of jQuery are loaded (which is not recommended by jQuery API),
calling $.noConflict( true ) from the second version will return the globally scoped jQuery variables to those of the first version.

<script src="other_lib.js"></script>
<script src="jquery.js"></script>

<script>
$.noConflict();
// Code that uses other library's $ can follow here.
</script>

This technique is especially effective in conjunction with the .ready() method's ability to alias the jQuery object, as within callback passed to .ready() you can use $ if you wish without fear of conflicts later:

<script src="other_lib.js"></script>
<script src="jquery.js"></script>

<script>
$.noConflict();
jQuery( document ).ready(function( $ ) {
// Code that uses jQuery's $ can follow here.
});
// Code that uses other library's $ can follow here.
</script>

In one project I've used it as

var j = jQuery.noConflict();
// Do something with jQuery
j( "div p" ).hide();

Also like this

jQuery.noConflict();
  (function( $ ) {
    $(function() {
    // More code using $ as alias to jQuery
   });
})(jQuery);

I hope this helps.

Why do people have to use multiple versions of jQuery on the same page?

your questions are all big. But from my personal experience except from very little problems in the first version which happened after migrating to later ones. Pretty much you should not run into any problems unless something is wrong with the code you have written and not jquery.

I have not seen any proper js developer who uses two different versions at the same time.

JQuery now itself offers a pretty nice api for unit testing called qunit. and if you start implementing test functions there you should be certain that your code works seamlessly.

I Use QUnit for heavy projects. which requires maybe alot of ajax requests etc. ofcourse it is not really worth it to use it for couple of animations etc.

I hope this information is helpful

How can I load multiple versions of a jQuery plugin on the same page?

This doesn't appear to be possible, especially with this plugin. For one, the plugin doesn't allow itself to be redefined/overwritten:

/*
 * Lets not redefine timepicker, Prevent "Uncaught RangeError: Maximum call stack size exceeded"
 */
$.ui.timepicker = $.ui.timepicker || {};
if ($.ui.timepicker.version) {
    return;
}

So you can't simply load the older version, initialize it, and then load the newer version on top of the old one, the newer one won't load.

Secondly, if the plugin is loaded in a separate context, say via RequireJS, then it doesn't have a handle on the jquery ui widgets. In other words you can bring in the plugin and attach it to a separate jQuery instance, but then jquery ui only uses one global div for the datepicker and the separate instance doesn't work with it. I've put together the following example (See full jsfiddle):

HTML

<script src="http://rawgit.com/trentrichardson/jQuery-Timepicker-Addon/v1.0.4/jquery-ui-timepicker-addon.js"></script>

<p><input id="date1" type="text" /></p>
<p><input id="date2" type="text" /></p>
<p><input id="date3" type="text" /></p>

<div id="qunit"></div>
<div id="qunit-fixture"></div>

Javascript

require.config({
    paths: {
        'jquery': '//cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min',
        'jquery-ui': 'http://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min',
        'jquery.timepicker': 'http://rawgit.com/trentrichardson/jQuery-Timepicker-Addon/v1.4.5/dist/jquery-ui-timepicker-addon'
    },
    shim: {
        'jquery.timepicker': {
            deps: ['jquery', 'jquery-ui'],
            init: function(jquery) {
                return jquery.noConflict(true);   
            }
        }
    },
});

QUnit.test('global timepicker is 1.0.4', function (assert) {
    assert.ok($.timepicker.version == '1.0.4',
              $.timepicker.version);
});

$('#date1').timepicker();

require(['jquery', 'jquery.timepicker'], function ($) {
    QUnit.test('amd timepicker is 1.4.5', function (assert) {
        assert.ok($.timepicker.version == '1.4.5',
                  $.timepicker.version);
    });

    // Not working...
    $('#date2').datepicker();
});

setTimeout(function() {
    QUnit.test('global timepicker is still 1.0.4', function (assert) {
        assert.ok($.timepicker.version == '1.0.4',
                  $.timepicker.version);
    });

    $('#date3').timepicker();
}, 2000);

The only solution I can see is as @Oliboy50 suggests, clone the source and rename the plugin.

EDIT

Hmm... Maybe this works (fiddle):

// Maybe working...
$.datepicker = jQuery.datepicker;
$.fn.datepicker = jQuery.fn.datepicker;
$('#date2').timepicker();

Is it possible to use 2 versions of jQuery on the same page?

Possible? Yes, in the same way that it's possible to run jQuery and another framework that uses the name $ at the same time. Include one copy of jQuery and assign it to a new name using noConflict, then do the same to another copy.

A good idea? Really no, in the same way that running jQuery and another framework at the same time isn't a good idea, only more so. jQuery is a far-reaching, invasive framework. If two instances of jQuery start mutating the same element (and versions of jQuery before 1.4 are very promiscuous about what elements they touch), they are likely to confuse each other with unpredictable, timing-sensitive and undebuggable side-effects.

If at all possible, updating all the code to run under the latest jQuery is by far the better route. This really shouldn't be that difficult; the jQuery devs haven't broken much that code should ever have relied on in the first place.

How to run multiple versions of Jquery in one HTML

It should be pretty simple:

<script type='text/javascript' src='js/jquery.1.0.0.js'></script>  
<script type='text/jvascript'>
  var $jq1 = jQuery.noConflict();
</script>

<script type='text/javascript' src='js/jquery.2.0.0.js'></script>  
<script type='text/jvascript'>
  var $jq2 = jQuery.noConflict();
</script>

<script type='text/javascript' src='js/jquery.3.0.0.js'></script>  
<script type='text/jvascript'>
  $(document).ready(function() {
    console.log('constructed with jQuery 3.0.0');
  });
</script>

You however must make sure the right script is in the right scope, usualy you do something like:

$('#id').plugin();

this must be, for example:

$jq1('#id').plugin(); 

---

Related Topics