Jquery And Mootools, .noConflict is failing - javascript

I have an application that requires the use of a mootools calendar, however, I use jquery for my main app structure.
As soon as I have mootools in with jquery, neither work, and when I have only one, they work fine. I did some research saying I could use a method called .noconflict, and while i've tried, I have not gotten it to solve my issue. Perhaps someone could better explain to me where to do the actual .noconflict calls, and perhaps help me get this working.
Thanks!
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
var fixHeight = function () {
var gutter = 50;
var newHeight = $(window).height() - (gutter*2);
$('#container').height(newHeight);
}
$(function(){
fixHeight();
$('ul#nav li.item').each(function(index) {
if ($(this).attr("name") == "media") {
$(this).attr("id","active");
}
});
$('input').focus(function() {
$(this).attr("value","");
}).blur(function() {
$(this).attr("value",$(this).attr("original-value"));
});
$(window).resize(function() {
fixHeight();
}).load(function() {
fixHeight();
});
});
</script>
<script type="text/javascript" src="http://taptouchclick.com/js/mootools-1.2.4-core-yc.js"></script>
<script type="text/javascript">
window.addEvent('domready', function(){
var smoothCalendar = new SmoothCalendar("calendar");
});
</script>

yes, the noConflict method should work, but if it doesn't or if you want to do it in another way, you should encapsulate the scripts in self-calling functions with the parameter being set as the main library object:
(function($){
// al your jquery logic here
alert($ instanceof jQuery);
})(jQuery)
after that, you should include the next library(in your case MooTools) and write the script normally , or - to be very sure - you can encapsulate the MooTools logic in a function as well.

You should be fine if you simply call:
jQuery.noConflict();
...before including the Mootools JS file.
You can then use jQuery functions by using jQuery instead of $. Example:
jQuery('.selector').hide(); // instead of $('.selector').hide();

You can also pass $ back in through the DOM-ready event:
$.noConflict();
// Non-jQuery code goes here
jQuery(document).ready(function($) {
// You can now use the dollar sign safely inside of this function
}

Related

detect jquery version use on or live

I am writing a plugin which can be used in any website where I dont know the exact version of jquery and getting a few issues with the .on() method.
To fix it I have something simple like this but still getting errors in jQuery 1.4.2.
var $myElements = $('.elements'),
myFunction = function(e){
console.log('here');
e.preventDefault();
}
if (typeof jQuery != 'undefined') {
if(jQuery.fn.jquery < 1.4){
$myElements.live('click', myFunction);
} else {
$(document).on('click', $myElements, myFunction);
}
}
Based on the previous answer, you can do this too:
;(function($) {
if(!$.fn.on) {
$.fn.on = $.fn.live;
}
}(window.jQuery || window.Zepto));
Then you can use on in the rest of your code.
You should bundle your own version of jQuery to save yourself a lot of hassle and a lot of redundant code. You can do this using noConflict to ensure that both your code and the code of the source website act independently:
<!-- load your jQuery -->
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
var yourjQueryVersion = $.noConflict(true);
(function($) {
// Now you can use $ just like you normally would
// And it will only execute against jquery-1.11.0
$(function() {
var $myElements = $('.elements'),
myFunction = function(e){
console.log('here');
e.preventDefault();
}
$(document).on('click', $myElements, myFunction); // Yay!
});
})(yourjQueryVersion);
</script>
This means that:
You don't need to write extra code for all jQuery version differences
If the target website upgrades to jQuery 2.0 (or similar), none of your code will break.
The source website might even be using a CDN, so there is a good chance only one copy of the jQuery library may be loaded due to caching.

Plupload messing up jquery

I am using the image uploader Plupload and it is causing errors with the other jquery I have on my page. I have figured out exactly what part is doing it:
function $(id) {
return document.getElementById(id);
}
If I take this out the image uploader no longer works but the jquery does. It is a lot of code to post here, does anyone have another way to call this function so that it works with jquery? Thanks in advance for any help.
use jQuery like this:
jQuery(function($){
//Your jQuery code here
// Use $ alias worry-free of conflicts
alert('You are using jQuery ' + $().jquery );
});
or
(function($){
//Your jQuery code here
})(jQuery);
or
$.noConflict();
jQuery(document).ready(function($) {
// Code that uses jQuery's $ can follow here.
});
// Code that uses other library's $ can follow here.
or
var j = jQuery.noConflict();
// Do something with jQuery
j("div p").hide();
// Do something with another library's $()
$("content").style.display = 'none';

jQuery Mootools not working - tried some tricks

I'm issues getting JQuery to work with Mootools, and I've tried just about every thing I've found on resolving the conflict, so I'm thinking I'm just doing it wrong, and not realizing it.
Here's the code without the libraries listed:
<script type="text/javascript">
jQuery.noConflict();
$(document).ready(function() {
$('.slideshow').cycle({
fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
});
})(jQuery);
<script type="text/javascript">
(function($){
window.addEvent('domready', function() {
var status = {
'true': 'HIDE',
'false': ''
};
var myVerticalSlide = new Fx.Slide('vertical_slide').hide();
$('v_toggle').addEvent('click', function(event){
event.stop();
myVerticalSlide.toggle();
});
myVerticalSlide.addEvent('complete', function() {
$('vertical_status').set('text', status[myVerticalSlide.open]);
});
});
})(document.id);
Use jQuery instead of $
jQuery('.slideShow')
$ is a reference to jQuery so they're interchangeable
I don't know anything about mootools but they both use the $ identifider. I believe you need to reassign the $ to one of them.
<script type="text/javascript" charset="utf-8">
var $j = jQuery.noConflict();
</script>
So now when you want to use jQuery you do
$j('selector').show();
And you use the same syntax as before for Mootools.

Javascript not working when adding another script

Ok Guys please forgive my ignorance. I'm new to javascript so all help is well received. I've been trying to implement these solutions but it's not working. This is what I have on my revised code:
<script type="text/javascript">
jQuery.noConflict() // return `$` to it's previous "owner"
(function($){ // in here you're assured that `$ == jQuery`
$(document).ready(function(){
$('#slider1').tinycarousel()
$('a.fancybox').fancybox()
$('textarea, select').uniform()
$('#slider').nivoSlider ({ pauseTime: 6000, effect: 'sliceDown'})
})
})(jQuery)
</script>
When i do this it makes all of the above stop working.
Also, I still have the other statement
function $(id) {
return document.getElementById(id);
}
Which Im not sure if I understand what to do with it since if I take it off the element that goes with it stops working (it's a dual slider)
Thanks Again
I'm a javascript novice so my apologies :0)
I'm using this javascript on a website:
<script type="text/javascript">
$(document).ready(function(){
$('#slider1').tinycarousel();
$('a.fancybox').fancybox();
$('textarea, select').uniform();
$('#slider').nivoSlider ({ pauseTime: 6000, effect: 'sliceDown'});
});
</script>
There is another script that contains this at the beginning which is making everything else to stop working. As soon as I delete it everything works again. Is there a way to unite these? or do they need to stay separate?
function $(id) {
return document.getElementById(id);
}
Thanks in advance...
Use noConflict to release $ and the use jQuery() instead of $() for jQuery operations:
<script type="text/javascript" src="other_lib.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$.noConflict();
// Now $('x') uses the custom $ function.
</script>
The problem is you have declared a function called $ which now overwrites the jquery reference that is created by jquery.
thus when you do $('#slider1').tinycarousel(); you are now expecting a method tinycarousel defined on the object returned by your function.
if you still want to continue using jquery and your function you will have to use
jQuery("something").tinycarousel()
It's good practice to "shield" your code from this kind of problem by never using the $ function directly, instead create a new scope where you explicitly define $ = jQuery:
jQuery.noConflict() // return `$` to it's previous "owner"
(function($){ // in here you're assured that `$ == jQuery`
$(document).ready(function(){
$('#slider1').tinycarousel()
$('a.fancybox').fancybox()
$('textarea, select').uniform()
$('#slider').nivoSlider ({ pauseTime: 6000, effect: 'sliceDown'})
})
})(jQuery)
Alternatively, jQuery passes itself to the DOMReady short form:
jQuery.noConflict()
jQuery(function($){
$('#slider1').tinycarousel()
$('a.fancybox').fancybox()
$('textarea, select').uniform()
$('#slider').nivoSlider ({ pauseTime: 6000, effect: 'sliceDown'})
})
Make this a standard practice and you'll avoid the issue in the future.
You should probably remove the second script because jQuery itself contains ID selector which will select elements from dom using id as requirement.
Remove this
function $(id) {
return document.getElementById(id);
}
Do this from now to select with ID
$(document).ready(function(){
$("#myCarousel").fadeIn();
});

How to solve jQuery and mootoools conflict?

I use
<script type="text/javascript" src="jquery-1.2.2.pack.js"> </script>
to load jquery and then load an external script that contains these :
var jkpanel={
controltext: 'menu',
$mainpanel: null, contentdivheight: 0,
openclose:function($, speed){
this.$mainpanel.stop() //stop any animation
if (this.$mainpanel.attr('openstate')=='closed')
this.$mainpanel.animate({top: 0}, speed).attr({openstate: 'open'})
else
this.$mainpanel.animate({top: -this.contentdivheight+'px'}, speed).attr({openstate: 'closed'})
},
init:function(file, height, speed){
jQuery(document).ready(function($){
jkpanel.$mainpanel=$('<div id="dropdownpanel"><div class="contentdiv"></div><div class="control">'+jkpanel.controltext+'</div></div>').prependTo('body')
var $contentdiv=jkpanel.$mainpanel.find('.contentdiv')
var $controldiv=jkpanel.$mainpanel.find('.control').css({cursor: 'wait'})
$contentdiv.load(file, '', function($){
var heightattr=isNaN(parseInt(height))? 'auto' : parseInt(height)+'px'
$contentdiv.css({height: heightattr})
jkpanel.contentdivheight=parseInt($contentdiv.get(0).offsetHeight)
jkpanel.$mainpanel.css({top:-jkpanel.contentdivheight+'px', visibility:'visible'}).attr('openstate', 'closed')
$controldiv.css({cursor:'hand', cursor:'pointer'})
})
jkpanel.$mainpanel.click(function(){jkpanel.openclose($, speed)})
})
}
}
//Initialize script: jkpanel.init('path_to_content_file', 'height of content DIV in px', animation_duration)
jkpanel.init('1', '80px', 1000)
and also use a mootools plugin of course.
MY QUESTION IS THAT how should I use var $j = jQuery.noConflict(); in the above script to prevent conflicting
Wrap all the JavaScript that relies on jQuery in a closure to prevent namespace conflicts, like so:
// Start closure to prevent namespace conflicts
;(function($) {
// Whatever code you want that relies on $ as the jQuery object
// End closure
})(jQuery);
It looks weird, but the syntax is right (yes, the first line starts with a semicolon). This automatically substitutes jQuery for the $ object, which both jQuery and mootools make use of. Since you're using both, you should wrap all of your jQuery code in a closure like this (one for each .js file or script tag).
If the problem is just, you load MooTools, and then you load jQuery, and then MooTools doesn't work because jQuery has taken over the dollar function, then you probably just need code like this:
<script type="text/javascript" src="mootools.js"> </script>
<script type="text/javascript" src="jquery-1.2.2.pack.js"> </script>
<script type="text/javascript">
jQuery.noConflict();
</script>
That should get jQuery to relinquish $(). The code you have in your question already does the other handy thing, which is use the parameter to the ready event handler as a way to locally use a shorter name for the jQuery object.
I'd strongly recommend reading the jQuery page on working with other libraries and maybe the documentation for the noConflict() function.

Categories

Resources