This question already has answers here:
Including More Than One jQuery Versions
(2 answers)
Closed 8 years ago.
I have the following code,
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js" type="text/javascript">
alert($().jquery); // Version 2.1.0
jQuery.noConflict();
alert($().jquery); // Previous version
</script>
Where I would like to use the 2nd version to do some stuff, then return the $ variable back to the first version, so existing jQuery functions still work. But when I run this, $().jquery returns version 1.3.2, which is the old version. Anyone able to help?
Thanks
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.
Related
I am using jQuery on my website. However, given that Chrome plugins might import a jQuery version of there own in the global scope ($), how do I prevent their jQuery (from a plugin on the client's browser) from overriding my jQuery (the one being originally loaded with the website and the extended functions built on top of it).
Use Jquery jQuery.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>
For More details refer https://api.jquery.com/jquery.noconflict/
Would recommend looking in to jQuery.noConflict, you give $/jQuery a different reference - https://api.jquery.com/jquery.noconflict/
var j = jQuery.noConflict();
j( "div p" ).hide();
// Do something with another library's $()
$( "content" ).style.display = "none";
Use the following. jQuery.noConflict() for tackling these situations.
<script src="jquery.js"></script>
<script>
var $j = jQuery.noConflict();
// Code that uses other library's $ can follow here.
</script>
<script src="other_lib.js"></script>
<script>
$j(document).ready(function(){
//your code
})
</script>
Then use you can use $j instead of jQuery or $ on the places you need to use jQuery reference. Same can be used if there are multiple versions of jQuery is needed on the page. Just use different variables.
I have the problem that I want to load a Javascript on a website from another website and use jQuery there. But it seems jQuery is never available.
I tried all the things in this post: Test if jquery is loaded not using the document ready event.
Is it maybe a security cross site issue?
Here is the page:
Japanese cities
jQuery is loaded here in line 29
<script src="/cache/template/gzip.php?jquery.min-3eab6f02.js" type="text/javascript"></script>
The script is loaded in line 343
<script type="text/javaScript" src="http://www.factfish.com/api/js/japanese_cities.js"></script>
To narrow it down I just used an empty $ajax function
(function() {
if (jQuery) {
$.ajax({});
}
})();
I always get the error
TypeError: $.ajax is not a function
Any ideas?
Thank you
Bernhard
In your page there's
<script src="/cache/template/gzip.php?jquery-noconflict-4baa84c1.js" type="text/javascript"></script>
which does this:
jQuery.noConflict();
This means you
Relinquish jQuery's control of the $ variable
I.e. $ is no longer associated with jQuery, and you must explicitly use jQuery instead.
See this: https://api.jquery.com/jquery.noconflict/
This should work:
(function() {
if (jQuery) {
jQuery.ajax({});
}
})();
Another way to do this:
(function( $ ) {
$(function() {
// More code using $ as alias to jQuery
$.ajax({});
});
})(jQuery);
As pointed out by #dekkard, you have effectively erased the $ shortcut alias for jQuery.
As an alternative to the IIFE's shown by #dekkard, There is also a shortcut DOM ready that combines document.ready with a locally scoped $
e.g.
jQuery(function($){
// Your DOM ready code - using a locally scoped $
});
"Half the code, twice the flavour!" :)
In my regular project setup we are using jQuery v1.6.2, but recently we have started to use Kendo UI plugin for charts; this plugin won't support the jQuery version v1.6.2, it works only with v1.7 or higher, so we are forced to load v1.7 also using noConflict.
Are there any side effects to my existing old code? Can we load and use two versions of jQuery at the same time?
Yes, you can do it. Using jQuery.noConflict() you can make multiple versions of jQuery coexist 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>
extracted from jQuery forums
Later, you just use jQ16 instead of $, e.g.:
<script>
jQ16.ready(function($) {
// inside here, $ refers to jQ16
$('#something').val(); // ...
});
</script>
I have an HTML document where I have referenced jQuery version 1.2.2 in the header for thickbox and I have later referenced jQuery 1.7.1 just before the </body> tag which is for a picture slideshow.
The problem is that the thickbox won't work unless the reference for jQuery 1.7.1 is removed which then stops the slideshow from working.
I have googled around to find out about $ conflict but none of the suggested solutions worked.
The most common one I have seen and did tried is: var $j = jQuery.noConflict();
How can I resolve this?
<script src="http://code.jquery.com/jquery-1.2.2.min.js"></script>
<script type="text/javascript">
var jQ122 = jQuery.noConflict();
</script>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
var jQ171 = jQuery.noConflict();
(function($) {
$(function() {
// here $ is jQuery 1.2.2
});
})(jQ122);
(function($) {
$(function() {
// here $ is jQuery 1.7.1
});
})(jQ171);
</script>
If the plug-ins are well-behaved, then this should work:
<script src="jquery-1.2.2.js"></script>
<script src="thickbox.js"></script>
<script src="jquery-1.7.1.js"></script>
<script src="slideshow.js"></script>
(Obviously those script names are made up.) Here's an example (source) (I used jQuery 1.4.2 and jQuery 1.7.1 because Google doesn't host 1.2.2).
The above works with well-behaved plug-ins because a well-behaved plug-in doesn't rely on the global $ at all, but rather uses the value of the jQuery global as of when it was loaded and grabs a reference to it in a closure, then uses that local reference throughout the plug-in's code, like this:
// Example plug-in setup
(function($) {
// ...Plug-in code using `$` here -- note it's a *local* `$`,
// not the global `$`, and not the global `jQuery`...
})(jQuery);
or
(function() {
var $ = jQuery;
// ...Plug-in code using `$` here -- note it's a *local* `$`,
// not the global `$`, and not the global `jQuery`...
})();
Both of those grab the global jQuery value as of when the plug-in is loaded and then use their local alias throughout.
If the plug-in wants to wait for the ready event, it can also do this:
jQuery(function($) {
// ...Plug-in code using `$` here -- note it's a *local* `$`,
// not the global `$`, and not the global `jQuery`...
});
...which uses the jQuery function passed into the ready handler.
Any of those three would work correctly (with thickbox seeing jQuery 1.2.2, and slideshow seeing jQuery 1.7.1) with the script load order listed above.
But the "if" in my opening sentence is a big "if". A lot of plug-ins are not written to be bullet-proof in this way.
The above notwithstanding, I would migrate away from any plug-in that requires jQuery 1.2.2 in order to work, and wherever possible (and it's almost always possible) avoid having to load two different versions of any library, including jQuery, in the same page.
I would not advise using two different versions of jQuery. There are some other alternatives to thickbox that works perfectly with the latest jQuery.
What you want to do is an extremely bad practice (you should indeed migrate all code to the same version) but it can theoretically be done...
You would need to make changes to the respective plugins anyways tho...
consider this code:
<script src="jquery-1.4.js"></script>
var jQuery14 = jQuery;
<script src="jquery-1.7.js"></script>
var jQuery17 = jQuery;
you would then change the code of your plugins at the point where jQuery is handed to the plugin, which would look similar to this:
(function( $ ){
// all your plugins code would be here
})( jQuery ); // replace "jQuery" with one of your respective jQuery14/jQuery17 versions/variables
Be advised.. this is veryveryvery messy to say the least!
write clean code or pay later! :)
Although you could use jQuery.noConflict(); to declare separate versions of jQuery at the same time.
I've often had some problems with IE8 with certain libraries when I do that.
So, an alternate solution would be to use an iframe to load a page within your current page.
Have a given version of jQuery on one page, and another on the second.
For example:
<iframe frameborder="0" width="700" height ="400" scrolling="no" seamless="seamless" src="your.html"></iframe>
I have a site using a "widget" (from http://healcode.com) that includes the script.aculo.us JavaScript library. The problem is that the site I'm building is on WordPress, so there's the classic jQuery vs script.aculo.us conflict.
I know that I need to run jQuery in .noConflict() mode, but I must be getting the syntax wrong. When I assign the $ to jQuery .noConflict as follows, it still shuts down the script.aculo.us functions:
var $ = jQuery.noConflict();
$(document).ready(function () {
//#nav-main dropdown effects
$('#nav-main ul li').hoverIntent(function () {
$(this).find('.dropdown').stop(true,true).slideDown('900'); },
function(){
$(this).find('.dropdown').stop(true,true).slideUp('500');
});
}); // end document.ready
I know that I am assigning the $ to jQuery in .noConflict() mode, and I assume that script.aculo.us (which loads via a widget in the main body, therefore AFTER jQuery) is trying to re-assign the $ back to script.aculo.us.
How can I assign the $ to jQuery in a way that the later-loaded script.aculo.us library won't conflict? I've already tried the following without any success (the following code causes script.aculo.us to work, but jQuery to fail):
jQuery(document).ready(function () {
//#nav-main dropdown effects
jQuery('#nav-main ul li').hoverIntent(function () {
jQuery(this).find('.dropdown').stop(true,true).slideDown('900'); },
function(){
jQuery(this).find('.dropdown').stop(true,true).slideUp('500');
});
}); // end document.ready
EDIT
The debug console output for the above code is:
Uncaught TypeError: Object #<HTMLDocument> has no method 'ready' (anonymous function) so the document.ready fails because it's assigned to jQuery, which is somehow not loading properly...
EDIT 2
Both of the 2 (at the time of this update) answers posted below do nothing to address the issue I'm struggling with. Perhaps they are technically correct, but they do not address my issue.
This worked for me so that I can have jQuery and script.aculo.us/Prototype working well together. Credit goes to codeimpossible for this lifesaver!
Instead of:
jQuery(document).ready(function () {
// Code to run on DOM ready
}); // End document.ready
Try this:
( function($) {
// Code to run on DOM ready
} )( jQuery ); // End document.ready
I found the solution VERY surprising!
First of all, using the $j = jQuery.noConflict(); mode did not work.
Second, calling jQuery.noConflict(); at the head did not work.
The method that did work was this one: http://codeimpossible.com/2010/01/13/solving-document-ready-is-not-a-function-and-other-problems/
Oddly, the Coda Slider 2.0 plugin does not automatically do noConflict so it turned out that IN ADDITION to the problems listed above, I needed to wrap that plugin in .noConflict(); as well. Shout out the the author of the blog post, not sure why other noConflict(); calling methods didn't work, but I'm glad I found the post.
Assigning jQuery right back to $ doesn't do anything.
Either assign jQuery to a different variable:
var j$ = jQuery.noConflict();
Or don't assign it to anything:
jQuery.noConflict();
Try this:
<script src="url to jquery"></script>
<script type="javascript">jQuery.noConflict();</script>
<script src="url to scriptaculous"></script>