I want to use both jquery 1.4 and 2.0 i am using noconflict function but this code does not work.
document head is something like this
<script src="js/jquery-2.0.0.min.js" type="text/javascript"></script>
<script>var jq142 = jQuery.noConflict(true);</script>
<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
and the jquery2.0 code is like this
<script>
jq142(document).ready(function(){
jq142('input').parent().next().hide();
jq142('input').on('focus', function () {
jq142(this).parent().next().show();
});
jq142('input').on('blur', function () {
jq142(this).parent().next().hide();
});
});
</script>
is something wrong in this approach because i am unable to make it work.
You need to put the noConflict statement after the second script has loaded. See the last example:
http://api.jquery.com/jQuery.noConflict/
Related
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>
I am creating a widget that will eventually sit on a clients site, and I need to create my own jQuery variable, so that the jquery versions don't conflict. Currently I have the following code:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> // Clients own jquery.
<script type="text/javascript" src="sf_content/js/jquery-1.11.2.min.js"></script> // My jQuery.
<script type="text/javascript">
var $sf_jquery = $.noConflict(true);
</script>
Everything else works just fine, but jQuery slider stopped working when I changed to my own jquery:
TypeError: $sf_jquery(...).slider is not a function
Is the problem with the jQuery slider, or am I missing something else here?
Good plain javascript slider -tips are welcome as well!
Edit: Everything the widget needs, is inside function call like this:
$sf_jquery(function(){ // all of the code here });
Edit: The jQuery Ui is imported aswell. Just forgot to add it here. The importing looks like this:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> // Clients own jquery.
<script type="text/javascript" src="sf_content/js/jquery-1.11.2.min.js"></script>
<script type="text/javascript">
var $sf_jquery = $.noConflict(true);
</script>
<script type="text/javascript" src="sf_content/js/jquery-ui.min.js"></script>
Edit, Solution!
Dummy me didn't think that the slider isn't part of the native jQuery. The noConflict must be after the jQueryUI, like this:
<script type="text/javascript" src="sf_content/js/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="sf_content/js/jquery-ui.min.js"></script>
<script type="text/javascript">
var $sf_jquery = $.noConflict(true);
</script>
You aren't including jQueryUI code (at least in your example).
Slider is part of jQueryUI and is not native to jQuery alone. (https://jqueryui.com/slider/)
Your "noconflict" function must be called before the second jQuery call.
I am using jquery for focus of tabs. When i used :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
in my jsp then the window.load function works good, but when i downloaded jquery.min.js and added in js folder.
<script type="text/javascript" src="jquery.min.js"></script> like this.
Now window.load function is not working.
<script type="text/javascript">
$(window).load(function() {
alert('Hello');
if($("#updatetemp").val()=="TRUE"){
$("#update_link").click();}
});
</script>
I found out the way to use JQuery locally..
jQuery(window).bind("load", function($) {
var msgtemp= jQuery("#updatetemp").val();
if(msgtemp=="TRUE"){
jQuery("#update_link").click(function() {
}).click();
}
});
Instead if $ symbol i just used jQuery attribute and it worked.
I'm using a jQuery plugin(?)/library called "Zentabs" and for some reason it's preventing any other jQuery code I write from working...this isn't the first time I've had trouble with jQuery library's breaking other pieces of code but usually I can rearange where the code appears and that'll usually fix whatever the problem is but this time nothing's working -_-
This is what I've got in the header;
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
alert("WTF!!!!!");
});
</script>
<script src="<?php baseURL();?>/zentabs.js" type="text/javascript"></script>
<script src="<?php baseURL();?>/date_time.js" type="text/javascript"></script>
<script src="jquery.lazyload.js?v=4" type="text/javascript" charset="utf-8"></script>
When I remove
<script src="<?php baseURL();?>/zentabs.js" type="text/javascript"></script>
Then
$(document).ready(function() {
alert("WTF!!!!!");
});
</script>
Work just fine, but when I include zentabs.js, nothing works =/
And here's the zentabs.js file > http://zenverse.net/wp-content/uploads/2009/09/zentabs.js
Can anybody tell me what I'm doing wrong?
P.S. I'm so freakin' frustrated right now I'm about ready to jump off
a building -_-
You need noConflict there. Try this, then from then forward just use jQuery instead of $()
$.noConflict();
jQuery(document).ready(function() {
alert("WTF!!!!!");
});
You could also set jQuery to a variable if you want, so its a bit shorter to type on all your calls later.
var jq = jQuery;
jq(document).ready(function() {
alert("WTF!!!!!");
jq('input').val( '...' );
});
Read more about noConflict on http://api.jquery.com/jQuery.noConflict/
try this if this solves:
$(document).ready(function() {
$.noConflict();
alert("WTF!!!!!");
});
your can find documentation here: http://api.jquery.com/jQuery.noConflict/
While using jquery or javascript code most of the time i have to face the problem of jquery or javascript conflict.
Still i haven't got the reason why this stuff get conflict with other code?
Any one have any idea about this?
And any solution so that next time this issue will not occur while project development.
I have one solution to stop the conflict of jquery files that is,
<script>
var j$=jQuery.noConflict();
</script>
but all the time this code is not working.
If you are using another JavaScript library that uses the $ variable, you can run into conflicts with jQuery. In order to avoid these conflicts, you need to put jQuery in no-conflict mode immediately after it is loaded onto the page and before you attempt to use jQuery in your page.
Method 1:
When you put jQuery into no-conflict mode, you have the option of assigning a variable name to replace $. ( only once )
<script src="prototype.js"></script>
<script src="jquery.js"></script>
<script>var $j = jQuery.noConflict();</script>
Method 2
You can continue to use the standard $ by wrapping your code in a
self-executing anonymous function; this is a standard pattern for
plugin authoring, where the author cannot know whether another library
will have taken over the $.
<script src="jquery.js"></script>
<script>
jQuery.noConflict();
(function($) {
// your code here, using the $
})(jQuery);
</script>
Method 3:
use jQuery instead of $
there few other ways to do so
reference
For jQuery, it's explained in noConflict's API page; basically, many JS frameworks use $ as a function name, and so they may conflict if more than one is used. Which it shouldn't anyway.
Try placing this in your header:
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js"> </script>
Try to give an alert when DOM is ready and find it alerts or not if not there is a conflict
<script>
$(document).ready(function () {
alert("Hello!");
});
</script>
I there is conflict try this:
<script type="text/javascript" src="other_lib.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$.noConflict();
jQuery(document).ready(function($) {
// Code that uses jQuery's $ can follow here.
});
// Code that uses other library's $ can follow here.
</script>