Develop Reference

jquery 1.4.2.min.js and jquery 1.11.0.js conflicting when used together [duplicate]

A project I'm working on requires the use of jQuery on customers' Web pages. Customers will insert a chunk of code that we'll supply which includes a few <script> elements that build a widget in a <script>-created <iframe>. If they aren't already using the latest version of jQuery, this will also include (most likely) a <script> for Google's hosted version of jQuery.
The problem is that some customers may already have an older version of jQuery installed. While this may work if it's at least a fairly recent version, our code does rely on some recently introduced functionality in the jQuery library, so there are bound to be instances when a customer's jQuery version is just too old. We can't require that they upgrade to the latest version of jQuery.
Is there any way to load a newer version of jQuery to use only within the context of our code, that will not interfere with, or affect, any code on the customer's page? Ideally, maybe we could check for the presence of jQuery, detect the version, and if it's too old, then somehow load the most recent version just to use for our code.
I had the idea of loading jQuery in an <iframe> in the customer's domain that also includes our <script>, which seems like it might be feasible, but I'm hoping there's a more elegant way to do it (not to mention without the performance and complexity penalties of extra <iframe>s).

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();.

After looking at this and trying it out I found it actually didn't allow more than one instance of jquery to run at a time. After searching around I found that this did just the trick and was a whole lot less code.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script>var $j = jQuery.noConflict(true);</script>
<script>
$(document).ready(function(){
console.log($().jquery); // This prints v1.4.2
console.log($j().jquery); // This prints v1.9.1
});
</script>
So then adding the "j" after the "$" was all I needed to do.
$j(function() {
$j('.button-pro').on('click', function() {
var el = $('#cnt' + this.id.replace('btn', ''));
$j('#contentnew > div').not(el).animate({
height: "toggle",
opacity: "toggle"
}, 100).hide();
el.toggle();
});
});

Taken from http://forum.jquery.com/topic/multiple-versions-of-jquery-on-the-same-page:
Original page loads his "jquery.versionX.js" -- $ and jQuery belong to versionX.
You call your "jquery.versionY.js" -- now $ and jQuery belong to versionY, plus _$ and _jQuery belong to versionX.
my_jQuery = jQuery.noConflict(true); -- now $ and jQuery belong to versionX, _$ and _jQuery are probably null, and my_jQuery is versionY.

You can have as many different jQuery versions on your page as you want.
Use jQuery.noConflict():
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
<script>
var $i = jQuery.noConflict();
alert($i.fn.jquery);
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
var $j = jQuery.noConflict();
alert($j.fn.jquery);
</script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
var $k = jQuery.noConflict();
alert($k.fn.jquery);
</script>
DEMO | Source

It is possible to load the second version of the jQuery use it and then restore to the original or keep the second version if there was no jQuery loaded before. Here is an example:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript">
var jQueryTemp = jQuery.noConflict(true);
var jQueryOriginal = jQuery || jQueryTemp;
if (window.jQuery){
console.log('Original jQuery: ', jQuery.fn.jquery);
console.log('Second jQuery: ', jQueryTemp.fn.jquery);
}
window.jQuery = window.$ = jQueryTemp;
</script>
<script type="text/javascript">
console.log('Script using second: ', jQuery.fn.jquery);
</script>
<script type="text/javascript">
// Restore original jQuery:
window.jQuery = window.$ = jQueryOriginal;
console.log('Script using original or the only version: ', jQuery.fn.jquery);
</script>

I would like to say that you must always use jQuery latest or recent stable versions. However if you need to do some work with others versions then you can add that version and renamed the $ to some other name. For instance
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script>var $oldjQuery = $.noConflict(true);</script>
Look here if you write something using $ then you will get the latest version. But if you need to do anything with old then just use$oldjQuery instead of $.
Here is an example:
$(function(){console.log($.fn.jquery)});
$oldjQuery (function(){console.log($oldjQuery.fn.jquery)})
Demo

<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>var $j = $.noConflict(true);</script>
It was not working for me then I changed it to
<script>var jQuery = $.noConflict(true);</script>
and it worked for me.

To further improve Juan Vidal's answer, it is worth noting that if you use multiple jquery plugins with one version (eg 3.3.1) and multiple jquery plugins with another version(eg 1.10.2), for older version to work (and it's plugins) you must dig into plugin's minified/unminified .js file(s) and alter the line that will be something like this:
Example 1: module.exports=a:a(jQuery) to module.exports=a:a(my_jQuery)
Example 2: b(a,require("jquery")):b(a,a.jQuery)} to this: or b(a,require("jquery")):b(a,a.my_jQuery)}

need to use jquery-1.min.js and jquery.min.js together

I need to use both below files but just one of the can work if both of the use in pae
<script src="jquery.min.js"></script>
<script src="jquery-1.min.js"></script>//just this work
Or if change order
<script src="jquery-1.min.js"></script>
<script src="jquery.min.js"></script>//just this work
I use a drag and drop plugin , this need jquery.min.js and my theme need to jquery-1.min.js for be responsive

You should be able to do this when you use noConflict.
<!-- load jQuery-1 -->
<script type="text/javascript" src="jquery-1.min.js"></script>
<script type="text/javascript">
var jQuery_1_min = $.noConflict(true);
</script>
<!-- load jQuery -->
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
var jQuery_min = $.noConflict(true);
</script>
Now whenever you need one of these files you can do this.
//example
$jQuery_min('.selector').live('click', function(){
//do something
});
If it still wont work I dont know anymore... This is the way everybody does it. Quick google search.

Plugins with different jQuery versions

In current implementation there is old version of jquery (1.7.x) and old plugin depends on this version of jquery.
And now I want to add new jQuery plugin which require latest jquery verson, but can not remove the old version of jquery as there will be lots of changes.
Can we use different jquery versoin for new plugin without conflict?
I am trying following solution, but does not work.
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
$(document).ready(function () {
$("#element").flexModal();
});
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script type="text/javascript">
var jQuery_1_8 = $.noConflict(true);
jQuery_1_8(document).ready(function () {
jQuery_1_8("#element2").flexModalLatest();
});
</script>
Plugins names are just for this code demo.

Alternatively you can use new jQuery (1.11 and up) with an official jQuery migrate plugin to support deprecated/removed functions.
http://jquery.com/download/#jquery-migrate-plugin

try this :
<!-- load jQuery 1.7.2 -->
<script type="text/javascript" src="http://example.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
var jQuery_1_7_2 = $.noConflict(true);
</script>
<!-- load jQuery 1.8.3 -->
<script type="text/javascript" src="http://example.com/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
var jQuery_1.8.3 = $.noConflict(true);
</script>
instead of
$('#selector')....;
you'd do
jQuery_1_7_2('#selector')....;
or
jQuery_1_8_3('#selector')....;

https://api.jquery.com/jQuery.noConflict/
After reading the docs, I think you're using it back-to-front - after loading the second jquery version, use var jQuery_1.7.2 = $.noConflict() to get reference to the original older version.

how to fix Conflicting Jquery sources 1.31 and 1.61?

I have a page with js source. I have to include two different jquery sources. If i take out one the countdown clock doesn't work.
how i work with js conflit ?
<script type="text/javascript" src="files/js/jquery-1.3.1.min.js"></script>
<script type="text/javascript" src="files/js/jquery.scrollTo.js"></script>
<script type="text/javascript" src="files/js/kivi.js"></script>
<script type="text/javascript" src="files/js/jquery.leanModal.min.js"></script>
<script type="text/javascript">
$(function() {
$('a[rel*=leanModal]').leanModal({ top : 200, closeButton: ".modal_close" });
});
</script>

I think you should better find out how to fix the contdown clock instead of loading 2 versions of jquery on the page.
There is that noconflict method but i'm sure the plugin doesn't do it that way. You can edit the source of the plugin, wrap it in an annonymous self executing function that takes one parameter
(function($) {
// your plugin code here
})(JQ);
where JQ is the non conflict name you get from whatever version of jquery this plugin requires.
So safest way is to fix the clock plugin

jQuery multiple versions noConflict in IE

I have a javascript widget that I wrote using jQuery 1.8 that loads on a clients website that uses jQuery 1.3. I cannot get noConflict working properly in IE without some really ugly hacks. Here is what the page looks like after my widget is rendered:
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.3.min.js"></script>
</head>
<html>
<body>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script>
$jq = $.noConflict();
</script>
</body>
</html>
In chrome, this works great, $jq is defined as jQuery 1.8.3, but in IE 8 this does not work, $jq is defined as jQuery 1.3. My guess is that its a timing issue, the script gets executed before the new jQuery is loaded. I put in some call back timers and it works, but I cant imagine having embedded callback timers is the right way to go.
Any ideas?
EDIT
I cannot namespace jQuery1.3, the client uses it throughout the page and does not want to upgrade.

<!-- load jQuery 1.5 -->
<script type="text/javascript" src="http://foo.com/jquery-1.5.js"></script>
<script type="text/javascript">
var jQuery_1_5 = $.noConflict(true);
</script>
<!-- load jQuery 1.6 -->
<script type="text/javascript" src="http://foo.com/jquery-1.6.js"></script>
<script type="text/javascript">
var jQuery_1_6 = $.noConflict(true);
</script>
in this case -
use
jQuery_1_6(document).ready(function($) {
// Code using $ as usual goes here.
});
instead of
jQuery(document).ready(function($) {
// Code using $ as usual goes here.
});
see here - http://blog.nemikor.com/2009/10/03/using-multiple-versions-of-jquery/

I ended up going with LABjs, which is a javascript loader. This way I can synchronously load scripts and execute code on them accordingly:
<script>
$LAB
.script("framework.js").wait()
.script("plugin.framework.js")
.script("myplugin.framework.js")
.wait(function(){
myplugin.init();
framework.init();
framework.doSomething();
});
</script>