Develop Reference

How to use two versions of jQuery in same webpage [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)}

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)}

Jquery Conflict issue for Calendar and Quicksearch

I am using the Jquery plugins for some functionaltiy like:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="Stylesheet" type="text/css" />
The above jquery i am using is for the Calendar datepicker, and the below jquery is i am using for is Quick search.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="js/quicksearch.js"></script>
When I use both the Jquery library, the quciksearch functionality stops working, and Calendar Datepicker works fine. But when I remove the below plugins:-
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"></script>
I tried removing the older version of jquery for working both, but it is not working. Please help.

I had some problems with jQuery before (I had a plugin that worked only with older versions of jQuery).
The UI version your're using is probably incompatible with jQuery 1.11, check the UI site, now it's on version 1.11.12 I think. For now ignore QuickSearch plugin, update the UI and jQuery and just try to make the DatePicker work again.
In case QuickSearch doesn't work with jQuery 1.11 you can try these options:
First, you can try to add the jQuery Migrate plugin and test this again
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
Case the above doesn't work, you can use the jQuery.noConflict option.
First you put the older version of jQuery and the call for its plugin:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/quicksearch.js"></script>
<script type="text/javascript">
var jqQuick = jQuery.noConflict(true);
jqQuick(document).ready(function () {
jqQuick('input#search').quicksearch('table tbody tr');
});
</script>
And then you call the jQuery supposed to be used in the entire project.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
So after doing this, when you need to use the older version of jQuery you're going to use jqQuick instead of $ and in the rest of the project you can use $ which is going to use jQuery 1.11 instead of 1.6.
Edit: After talking at the chat with Rahul we could check that even while using jQuery 1.11 he was still using jQuery UI for jQuery 1.6. We updated the UI to 1.11.12 and it worked fine.

Jquery Confliting with Magento Prototype

I want to use Foundation 5 Reveal modal in magento product page.
I added jquery and foundation.js in footer and call Foundation from footer.phtml
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation.min.js"></script>
<script>
$(document).foundation();
</script>
and added modernizr and css files in head.phtml
<link rel="stylesheet" href="css/foundation.css" />
<script src="js/vendor/modernizr.js"></script>
Then i added markup on product page and its working very well. But it is conflicting with magento prototype.
Then i just done jQuery.noConflict(); and then reveal model stopped working. I thought i is becacuse i am loading two versions at same time so i removed build in jquery lib and then again prototype stopped working.
I also juggled jquery call from head to local.xml , page.xml but no luck!
ERROR CODE: Uncaught TypeError: Cannot read property 'config' of undefined prototype.js:828
Does anyone know what is the problem or mistake i am doing?
Huge thanks in advance!

Two things that may help:
It's important where you put the noConflict call. If the rest of your site uses PrototypeJS, then here's where I'd do it:
<script src="js/vendor/jquery.js"></script>
<script>jQuery.noConflict();</script>
<script src="js/foundation.min.js"></script>
Having done noConflict, you have to use jQuery* instead of $ when you want to use jQuery:
<script>
jQuery(document).foundation();
</script>
(* You don't have to, you can use the return value of noConflict to create an alias. For instance, var $j = jQuery.noConflict(); will let you use $j instead of jQuery.)

Jquery library conflict with another jQuery library

I am using a lot of jQuery libraries in my application.
My application is based on a map, and the map is generated by my own server mapmyindia.com.
The problem is that there is a jQuery conflict that occurs when I use fancybox jQuery library, pagination jQuery library and drop-down checklist jQuery library, all work together.
My direction search API's don't work because of a jQuery library conflict.
However, if I remove all the jQuery libraries, I can use my direction search API
just fine.
With the jQuery libraries enabled, it gives me an error:
$.jsonp is not a function
My application is on app.mapmyindia.com/michelin please help me.......
<script>MIREO_RESOURCES_ROOT = "http://46.137.254.191/MapServer/";</script>
<script type="text/javascript" src="http://46.137.254.191/MapServer/MireoWebMap.js"></script>
<script type="text/javascript">
var map = $("#map");
var valid = new Validation();
map.MireoMap();
</script>
<script type="text/javascript" src="jquery/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="jquery/jquery-ui-1.8.13.custom.min.js"></script>
<script type="text/javascript" src="jquery/ui.dropdownchecklist-1.4-min.js"></script>
<script type="text/javascript" src="fancybox/jquery.fancybox.js?v=2.0.6"></script>
<link rel="stylesheet" type="text/css" href="fancybox/jquery.fancybox.css?v=2.0.6" media="screen"/>

Try to use jquery noConflict() and download the latest version of jquery that resolve some problems conflict

try this :
use jquery noconflict and wrap your code in jQuery functions :
http://api.jquery.com/jQuery.noConflict/
jQuery.noConflict();
jQuery(function($){
// my code here each
});
good luck.

The order in which you have declared your javascript, that is importing your MapmyIndia Js first, using it
<script type="text/javascript">
var map = $("#map");
var valid = new Validation();
map.MireoMap();
</script>
& then calling jQuery, I don't think so jQuery would be creating problem.
Also you should be using
var map=document.getElementById("id");
since you are calling jQuery after that so $() won't work.
EDIT : Or if the MayMyIndia Js also requires jQuery then you should call jQuery.Js on top.