<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script><!-- jQuery and $ now point to 1.10.2 -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script><!-- jQuery and $ now point to 1.11.0 -->
<script>
$11 = $.noConflict();
// $11 now points to 1.11.0
// $ still points to 1.10.2
</script>
<!-- SB Admin Scripts -->
<script src="js/sb-admin.js"></script>
<!-- carouFredSel -->
<script src="js/jquery.carouFredSel-6.2.1.js" type="text/javascript"></script>
<script src="js/carouFredSel-hookup.js" type="text/javascript"></script>
I have problems getting this right.
The script sb-admin.js doesn't work together with the carouFredSel.js on the same page. The code above shows my attempt to use 2 different jQuery libraries and 2 different variables($ and $11), each of them pointing to one of the libraries.
In the script sb-admin.js I only use the variable $11 and in jquery.carouFredSel.js and carouFredSel-hookup.js only the variable ยง.
At the moment none of the functions seem to work. What am I doing wrong here?
Any help appreciated.
According to the documentation
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.
You didn't provide the true argument. Change it to:
<script>
$11 = $.noConflict(true);
// $11 now points to 1.11.0
// $ still points to 1.10.2
</script>
I have no idea whether this will solve the overall problem of conflicts between the two other libraries. It seems unlikely that it's because they require different versions of jQuery.
I did try you recommendation and set the noConflict to (true),
but it did not help whatsoever.
In the meantime I found a workaround but unfortunately I can't tell why it works now.
I am using another function for about the same menu and this one apparently doesn't conflict with my carousel.
This is the script that conflicted with the carouFredSel script was the menu from here:
http://startbootstrap.com/templates/sb-admin-v2/
And this is the other menu script that works fine with carouFredSel is this:
http://demo.onokumus.com/metisMenu/
Related
NOTE: This is a different issue than two different versions of jQuery (what's mentioned here: Can I use multiple versions of jQuery on the same page?). The difference are these are two copies of jQuery of the same version number but with different included libraries loaded by external sources, meaning normal solutions to two different versions of calling with jquery does not work.
I have two different variants of jquery on the same website, loaded by different sources.
One, when running by one path, when I run console.log(jQuery.fn.jquery);:
3.4.1 -ajax,-ajax/jsonp,-ajax/load,-ajax/parseXML,-ajax/script,-ajax/var/location,-ajax/var/nonce,-ajax/var/rquery,-ajax/xhr,-manipulation/_evalUrl,-event/ajax,-effects,-effects/Tween,-effects/animatedSelector
The other path returns
3.4.1
However, both are on the system, path mainly affects load order. The problem is made worse that the former slim version seems to be what is defaulted to when it loads, and is loaded external to my app.
So the question is... one lacks ajax, the other does not, and by one path, ajax versions don't work because jquery thinks there's no such function. How do I tell it to check the other jquery file?
Going off of the comments...
You could approach this issue with an Immediately Invoked Functional Expression (IIFE) to scope your logic, or with a noConflict call. Lets say you have something like the following.
<script src="locationOfNormalJQuery"></script> <!-- included by you -->
...html...
<script src="locationOfSlimJQuery"></script> <!-- included by app out of your control -->
<script>
...your logic...
</script>
"your logic" would only be able to access the jQuery included from the second include because each jQuery include replaces the global window.jQuery and window.$ references. This can be altered in two possible ways.
noConflict
<script src="locationOfNormalJQuery"></script> <!-- included by you -->
<script>
window.jQueryWithAjax = jQuery.noConflict();
</script>
...html...
<script src="locationOfSlimJQuery"></script> <!-- included by app out of your control -->
<script>
jQueryWithAjax.find(<whatever>);
</script>
IIFE approach
<script src="locationOfNormalJQuery"></script> <!-- included by you -->
<script>
(function($){
$(<whatever>);
}(jQuery));
</script>
...html...
<script src="locationOfSlimJQuery"></script> <!-- included by app out of your control -->
The noConflict approach saves off the previous version of the jQuery into a secondary variable that can be used later. The IIFE approach moves the logic before the second script include happens, and passes in the current jQuery to it. At that point, all the logic in the IIFE will use the $ as the version that was passed in, regardless of how it may change on the window later.
Figured out a possible solution:
Since a later-loaded version of jQuery overrided an earlier version of jQuery, I can use a javascript to do constant checking via jQuery.fn.jquery and inspired by #Taplar's solution and this answer to another question: Listening for variable changes in JavaScript
I add a listener to window.jQuery and window.$
On change, I check the results of jQuery.fn.jquery and if it's different than what I want it to be, I reload jquery with the version I want. (If someone posts the code on how to do this before I figure it out, they'll get the checkmark).
Hi I am learning Javascript and am stuck resolving a JS related issue on my project http://www.merekhayaal.com/ I have installed Masonry layout which is conflicting with the rest of JS. I have read this usually has to do with fixing jQuery. I am only asking for pointers here. I need the following code to make the Masonry layout work:
<script src="babezlondon/modernizr-latest.js">
</script>
<script src="//code.jquery.com/jquery-1.8.3.min.js"></script>
<script>window.jQuery || document.write('<script src="js/shopshark/jquery-1.8.3.min.js"><\/script>')</script>
<script src="babezlondon/jquery.masonry.min.js"></script>
<script src="babezlondon/script.js"></script>
But when I put this in, the rest of JS on the page breaks. If the solution is to implement no-conflict in jQuery, what steps can I take to ensure I do it correctly in my case as there are multiple js files to deal with?
Have you already tried using jQuery noConflict? http://api.jquery.com/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>
Just use jQuery in noConflict() mode.
Stick this at the bottom of the jQuery script;
var $jq=jQuery.noConflict();
so now you would have to use $jq instead of $jQuery or $
This way, each script you have for different sliders etc you can change the var $jq to suit.
Hope this helps.
http://api.jquery.com/jQuery.noConflict/
Ok so what worked is when i removed a line of code
<script src="//code.jquery.com/jquery-1.8.3.min.js"></script>
from the script. It was apparently causing the conflict
I am getting an error related to [jCoverflip][1] that only occurs in IE8. The following error occurs:
SCRIPT438: Object doesn't support property or method 'widget'
jquery.jcoverflip.js, line 508 character 1
which relates to the following code:
$.widget( 'ui.jcoverflip', {
I have jQuery and jQueryUI both included, before the script, plus the script runs fine in all other browsers.
Whats causing the issue?
You seem to be loading jquery twice:
<!-- First here -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="/./scripts/jquery-ui-1.7.2.custom.js"></script>
<!-- Then again here -->
<script type="text/javascript" src="/scripts/jquery.js"></script>
They appear to be v1.3.2 and v1.0.4 (!), respectively. Those are completely out of date. I don't know what jQuery UI 1.7.2's requirements are, but I'm sure v1.0.4 won't do it. v1.3.2 might, jQuery UI 1.7.2 is a couple of years old. (You might at least look at jQuery UI 1.7.3, which says it's for jQuery v1.3.2.)
Also, you're using MooTools on the page, but I don't immediately see where you're calling jQuery.noConflict() (I didn't go digging all that deep). That could well be the problem, MooTools and jQuery both try to use $. To avoid a conflict, immediately after loading jQuery, do this:
<script>
jQuery.noConflict();
</script>
I had similiar problem. There is jquery.ui.widget.js which wasn't included. My problem got solved after including it.
I have setup a test html page to play with bgStretcher before adding it to a custom Wordpress theme. It works fine when I use the jQuery version:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
on , but it stops working when I use the version included in Wordpress:
<script type="text/javascript" src="http://pebbl.es/test/wp-includes/js/jquery/jquery.js?ver=1.6.1"></script>
The only difference I've seen between the two files is that the WP version prevents jQuery conflicts at the end, calling noConflict().
The page (html below) loads the first image, but then the console outputs an error:
Uncaught TypeError: Cannot read property 'fn' of undefined
(anonymous function)
The live version is on: http://pebbl.es/test/test .Any ideas on how to fix this? I can see it is a conflict error, but I can't see where/how to fix it? Many thanks.
<html>
<head><title>Test</title>
<script type='text/javascript' src='http://pebbl.es/test/wp-includes/js/jquery/jquery.js?ver=1.6.1'></script>
<script type="text/javascript" src="bgstretcher.js"></script>
<link rel="stylesheet" type="text/css" href="bgstretcher.css">
<script type="text/javascript">
jQuery(document).ready(function($){
jQuery('body').bgStretcher({
images: ['Rochy_Coleccion1.jpg', 'Rochy_Coleccion2.jpg'], imageWidth: 1024, imageHeight: 748
});
});
</script>
</head>
<body>
</body>
</html>
Namespace your jQuery: http://api.jquery.com/jQuery.noConflict/
add this between the two script tags:
var $my_jq = jQuery.noConflict();
after this, you have your 1.6.1 jQuery in no conflict mode.
you will have to call it using your variable name after this, e.g. $my_jq('#content')
UPDATE
this might not work, I see you are not loading 2 different jQuerys, your problem occurs when trying to use bgstretcher with an jQuery that is already in noConflict mode.
I am not a wordpress expert, but you might just change the wordpress jQuery to use your variable name. You can set jQuery in noConflict mode with or without namespacing it to a variable and it looks like your wordpress JQ does it without.
Or you can first load your own jQuery, namespace it and then use this for bgstretch.
The problem is that the noConflict call "frees" the $ variable again for use with different frameworks that also want to make use of it, so your bgstretch gets an error when trying to call $.
Or just try to remove the noConflict completly and see if it has any effect on your wordpress installation (it should not, I guess it is just for the purpose of giving WP users the ability to use different JS frameworks as well).
Hope you work it out.
I have a jQuery plugin conflict in Wordpress which I need some help with. On my test page at: http://timbaggaley.co.uk/test/ I have installed the Easy Fancybox plugin for image and video presentation. It worked fine until I installed the jQuery backstretch plugin using code posted into a Javascript adder widget. I'm guessing my problem is the call on multiple libraries and I need to use noConflict. I have amended my code to:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://www.timbaggaley.co.uk/js-includes/jq_backstretch/jquery.backstretch.js"></script>
<script type="text/javascript">
var $j = $.noConflict();
$j(document).ready(function() {
$j.backstretch("http://timbaggaley.co.uk/backstretch/pic4.jpg", {speed: 150});});
</script>
The backstretch still works but the Fancybox still does not. I am a complete programming novice and I have read as much of the jQery noConflict advice as I can find but cannot figure it out. Can anyone help me with some copy 'n' paste idiot-proof guidance on how to implement the noconflict trick into my website?
Thanks
Tim, London
Well, actually, Easy Fancybox uses jQuery, so this is not an issue of using multiple libraries. Therefore you should not use .noConflict().
First remove "var $j = $.noConflict();" and Try using "jQuery" instead of "$j"
I would normally just called $.noConflict() rather than store it in a variable.
Also, you can avoid conflict all together (normally) by using jQuery(document).ready() instead of $.