I'm looking for a jQuery noConflict example that shows 2 jQuery plugins in the same code snippet and how to use jQuery.noConflict so that these plugins should function. Where would it apply in the scenario below?
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://example.com/jquery.plugin_1.js"></script>
<script type="text/javascript" src="http://example.com/jquery.plugin_2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// plugin_1 code...
}
</script>
<script type="text/javascript">
$(document).ready(function() {
// plugin_2 code...
}
</script>
Most Joomla installations also come bundled with MooTools, which uses $ and $$ along with jQuery which uses $. This sounds like the issue you are experiencing. However both frameworks also have their own global variables you can use.
For MooTools it is document.id, for jQuery it is jQuery.
As a general rule closures help out a great deal with compatibility issues with plugins.
You can opt to fix the plugins by using the closures or wrap your $(document).ready() with them. I personally do both.
jQuery https://api.jquery.com/jquery.noconflict/
(function($){
//jQuery code here
}(jQuery));
MooTools http://mootools.net/blog/2009/06/22/the-dollar-safe-mode
(function($){
//MooTools code here
}(document.id));
The same issue can occur with a number of global values/variables, for example the usage of some plugins overriding undefined.
var undefined = null;
var isDefined = (typeof myVar === undefined);
This application of jQuery noConflict worked for me:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://example.com/jquery.plugin_1.js"></script>
<script type="text/javascript" src="http://example.com/jquery.plugin_2.js"></script>
<script type="text/javascript">
var $plugin_1 = jQuery.noConflict();
$plugin_1(document).ready(function() {
// replace "$" with "$plugin_1" in all instances of its use here.
// plugin_1 code...
}
</script>
<script type="text/javascript">
var $plugin_2 = jQuery.noConflict();
$plugin_2(document).ready(function() {
// replace "$" with "$plugin_2" in all instances of its use here
// plugin_2 code...
}
</script>
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)}
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 found a script which I want to use to my website. The problem is that this script is using jquery.tmpl which is messing some stuff on my site.
<script type="text/javascript" src="cameras/jquery.tmpl.js"></script>
I think it may be any conflict there with jQuery which I am using for some menus.
<script src="js/jquery-1.10.2.min.js"></script>
Is there anything I can do to fix that ?
Regards,
use noConflict();
<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 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.
I want to use two version of jquery at one page but how?Here I want to use jquery-1.8.1.min.js" with bellow script and jquery-1.3.2.min.j with another
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript" src="jquery-1.8.1.min.js"></script>
<script>
$(document).ready (function(){
$('.following').hover(function(){
$(this).text("Unfollow");
},function(){
$(this).text("Following");
});
$('.following').click(function(){
$(this).toggleClass('following follow').unbind("hover");
if($(this).is('.follow')){
$(this).text("Follow");
}
else{
$(this).bind({
mouseleave:function(){$(this).text("Following");},
mouseenter:function(){$(this).text("Unfollow");}
});
}
});
});
</script>
If possible, you should rewrite the scripts to use the same version of jQuery. The code that you show isn't very complicated, and should be possible to rewrite easily enough.
Anyhow, using the noConflict method, you can use two version of jQuery. You would need to put one of the scripts in a scope where the $ identifier references the new version. By Calling $.noClonflict(true) jQuery will reinstate the first version loaded and return a reference to the second version loaded:
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="jquery-1.8.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
(function($){
// in here $ is the 1.8.1 version
$(document).ready (function(){
$('.following').hover(function(){
$(this).text("Unfollow");
},function(){
$(this).text("Following");
});
$('.following').click(function(){
$(this).toggleClass('following follow').unbind("hover");
if($(this).is('.follow')){
$(this).text("Follow");
} else{
$(this).bind({
mouseleave:function(){$(this).text("Following");},
mouseenter:function(){$(this).text("Unfollow");}
});
}
});
});
}($.noConflict(true)));
// from here on $ is the 1.3.2 version
</script>
If you want to keep a reference to the second version also:
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="jquery-1.8.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
var $$ = $.noConflict(true);
// from here on $ is the 1.3.2 version and $$ is the 1.8.1 version
(function($){
// in here $ is the 1.8.1 version
}($$));
</script>
Yes, it's doable due to jQuery's noconflict mode. http://blog.nemikor.com/2009/10/03/using-multiple-versions-of-jquery/
I don't recommend using noConflict(). It's not really meant for this sort of thing if you look at the jQuery source. I recommend the following:
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript">var jQueryOld = $old = jQuery</script>
<script type="text/javascript" src="jquery-1.8.1.min.js"></script>
jQuery source for noConflict()
jQuery.noConflict = function( deep ) {
if ( window.$ === jQuery ) {
window.$ = _$;
}
if ( deep && window.jQuery === jQuery ) {
window.jQuery = _jQuery;
}
return jQuery;
};
Basically you'll still end up with two objects named jQuery once all is said and done. Additionally, to use this with jQuery you have to say jQuery.noConflict(true), and if you read the docs:
"If for some reason two versions of jQuery are loaded (which is not recommended), calling $.noConflict( true ) from the second version will return the globally scoped jQuery variables to those of the first version."