In the chain of this SO thread, I am extending the question. If I have two files say jquery.ui 1.8.12 and jquery.ui 1.10.3. If I use some ui functionality like datepicker,tooltip,throws me error for the older version of jquery (I want older version because one of my js plugin uses this) file How to handle this situation. how to link particular file for particular function call.
Yes you can do it:
By using jQuery.noConflict() to load multiple versions of jQuery is actually pretty simple.
Example from the blog(The blog is bit old but worth reading).
<!-- load jQuery 1.1.3 -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.1.3.js"></script>
<script type="text/javascript" src="jquery.dimensions.min.js"></script>
<!-- revert global jQuery and $ variables and store jQuery in a new variable -->
<script type="text/javascript">
var jQuery_1_1_3 = $.noConflict(true);
</script>
<!-- load jQuery 1.3.2 -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.3.2.js"></script>
<!-- revert global jQuery and $ variables and store jQuery in a new variable -->
<script type="text/javascript">
var jQuery_1_3_2 = $.noConflict(true);
</script>
So now you can use refer to your required version by using their references.
Demo of Different plugin usega
http://blog.nemikor.com/2009/10/03/using-multiple-versions-of-jquery/
Related
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)}
I've found many other similar questions but this particular scenario is somewhat unique to the more typical ones to which the prior questions are applicable.
My understanding and the normal approach I use to resolve conflicts between 2 versions of JQuery are as follows in this example:
<script type="text/javascript" src="../Static/jquery-1.3.2.min.js" ></script>
<script type="text/javascript" src="/Scripts/jquery-ui 1.12.1.custom/jquery.js"></script>
<script type="text/javascript">
var JQuery_1_12_1 = $.noConflict(true);
$JQuery_1_12_1(document).ready(function () {
// Code dependent on JQuery 1.12.1 can safely execute here without
// conflicting with version 1.3.2
});
</script>
<script type="text/javascript">
// Code executed within this block will use 1.3.2
</script>
Alternatively, I could have duplicated the approach implemented to define the noConflict variable for 1.12.1 for 1.3.2 and the result would have been the same.
The problem I'm having difficulty in resolving is that I'm confronted with a situation I previously haven't had to deal with where there are linked library dependencies that need to be combined together in a noConflict manner.
Here is the current situation:
<script type="text/javascript" src="../Static/jquery-1.3.2.min.js" ></script>
<script type="text/javascript" src="/Scripts/jquery-ui-1.12.1.custom/jquery-ui.js"></script>
<script type="text/javascript" src="/Scripts/jquery-ui 1.12.1.custom/jquery.js"></script>
<script type="text/javascript">
var JQuery_1_12_1 = $.noConflict(true);
$JQuery_1_12_1(document).ready(function () {
// Code dependent on JQuery 1.12.1 can safely execute here without
// conflicting with version 1.3.2 but do to the lack of the dependent version this code will always break
});
</script>
<script type="text/javascript">
// Code executed within this block will use 1.3.2
</script>
As you can note, there is an inter-dependency between jquery-ui.js and jquery.js and due to this inter-dependency the $JQuery_1_12_1 variable cannot be applicable to both.
Alternatively, creating a separate noConflict variable for the jquery-ui.js library would require it to be placed within the context of a separate script tag which would essentially break the dependency and the code won't function correctly.
How can this problem be resolved?
I have also tried using the same versions of one of the JQuery libraries to alleviate the conflicts but they each have a unique set of features that don't crossover. So only one version will work per required application within the code.
First: Don't use multiple versions of jQuery. It bloats and complicates your page. Use an up-to-date version of jQuery and, if you have plugins that don't work with that up-to-date version, update them so they do (and ideally send a pull-request back to the plugin's repo if it has one), or use something that's actively maintained instead.
Now, if for some reason you can't do that:
Any half-decent jQuery plugin uses the jQuery variable's value as of when the plugin is loaded, by doing something like this:
(function($) {
// Plugin code
})(jQuery);
If you load a different version of jQuery afterward, the plugin still uses the earlier one because it captured the value of jQuery as of when it loaded.
So load your plugins for a given jQuery version immediately after loading that version of jQuery.
Then: Do the same for your own code.
<script src="../Static/jquery-1.3.2.min.js" ></script>
<script src="../plugin/that/needs/version/132.js"></script>
<script src="../your/code/that/needs/version/132.js"></script>
<script type="text/javascript" src="/Scripts/jquery-ui 1.12.1.custom/jquery.js"></script>
<script type="text/javascript" src="/Scripts/jquery-ui-1.12.1.custom/jquery-ui.js"></script>
<script src="../your/code/that/needs/what/jQueryUI/is/using.js"></script>
...where your script code does the same thing a well-behaved plugin does:
(function($) {
// Use $ here
})(jQuery);
If you have code that (shudders) needs to use both versions of jQuery, capture each version in a variable:
<script src="../Static/jquery-1.3.2.min.js" ></script>
<script src="../plugin/that/needs/version/132.js"></script>
<script>
var jQuery_v132 = jQuery;
</script>
<script src="../your/code/that/needs/version/132.js"></script>
<script type="text/javascript" src="/Scripts/jquery-ui 1.12.1.custom/jquery.js"></script>
<script type="text/javascript" src="/Scripts/jquery-ui-1.12.1.custom/jquery-ui.js"></script>
<script>
var jQuery_whatever = jQuery;
</script>
<script src="../your/code/that/needs/what/jQueryUI/is/using.js"></script>
<script src="../your/code/using/both.js"></script>
...where your code using both uses jQuery_v132 or jQuery_whatever as appropriate.
(I've used "whatever" because I have no idea what version of jQuery your jquery-ui 1.12.1.custom/jquery.js file is, but it's unlikely to be jQuery 1.12.1.)
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)}
We are currently loading 2 different versions of jQuery on our page, 1.4.2 and 1.10.1.
The $ and window.jQuery objects are currently pointing to 1.4.2.
We are using noConflict() with version 1.10.1 to set it to $jq1:
var $jq1 = jQuery.noConflict(true);
Is there any way to get Bootstrap 3.0 plugins to automatically use $jq1 instead of $ or window.jQuery?
If you load the bootstrap JS straight after loading jQuery version 1.10.1 and then put jQuery into no conflict mode, it should work.
e.g.:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<!-- Load any Bootsrap JS files before calling jQuery.noConflict() -->
<script src="bootstrap.js"></script>
<script>
// Put jQuery 1.10.2 into noConflict mode.
var $jq1 = jQuery.noConflict(true);
</script>
<!-- This can be before or after the above -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
jQuery.noConflict(true) will reassign both $ and jQuery to their previous values so it doesn't matter if version 1.4.2 is loaded first or not.
It does mean your users will be downloading jQuery twice though and you will need to remember if to use $jq1 or $ when doing anything with jQuery.
I liked the explanation that the user "ajpiano" provided at https://forum.jquery.com/topic/multiple-versions-of-jquery-on-the-same-page:
<script src='jquery-1.3.2.js'></script>
<script>
var jq132 = jQuery.noConflict();
</script>
<script src='jquery-1.4.2.js'></script>
<script>
var jq142 = jQuery.noConflict();
</script>
First Load the Older Version of Jquery.
Then your Boostrap js,css everthing goes here.
Finally add this.,
<script type="text/javascript">
var $versionNumberJ1 = jQuery.noConflict(true);
</script>
Then, use like this.,
<script>
$versionNumberJ1 ( function() {
$versionNumberJ1 ( "#tabsModal" ).tabs();
} );
</script>
Similar question for reference:
How do I run different versions of jQuery on the same page?
I have a situation where I have my own version of jQuery(1.4.2), with all sorts of custom functions defined. This version of jQuery is loaded before a third party script, which loads its own version of jQuery (1.4.3), and when this script is loaded it somehow destroys all the custom functions I had. The third party script uses noconflict after jQuery is loaded. Because of the noconflict code, I assume the problem would be fixed if I could load the third party script before anything else, however my environment is such that I cannot guarantee this, however I can run some custom javascript before and/or after loading the script if I load it dynamically.
What I am wondering is if there is some way I can save/restore/protect my own version of jQuery so that the custom methods will be accessible after the third party script runs?
If you can run custom code before and after this script is loaded I believe this will do it:
var $myJQ = jQuery.noConflict();
// Load the other script. It should move itself away from the $ and jQuery variables
// if it properly calls noConflict.
var $ = $myJQ;
I believe gets you to what you're after.
From http://blog.nemikor.com/2009/10/03/using-multiple-versions-of-jquery/
<!-- load jQuery 1.1.3 -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.1.3.js"></script>
<script type="text/javascript" src="jquery.dimensions.min.js"></script>
<!-- revert global jQuery and $ variables and store jQuery in a new variable -->
<script type="text/javascript">
var jQuery_1_1_3 = $.noConflict(true);
</script>
<!-- load jQuery 1.3.2 -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.3.2.js"></script>
<!-- revert global jQuery and $ variables and store jQuery in a new variable -->
<script type="text/javascript">
var jQuery_1_3_2 = $.noConflict(true);
</script>
and then
jQuery_1_1_3('<button>Use jQuery 1.1.3</button>')
.click(function() {
alert('Top: ' + jQuery_1_1_3(this).offset().top + '\n' +
'jQuery: ' + jQuery_1_1_3.fn.jquery);
})
.appendTo('body');