JQuery Mootools conflict - How to fix

JoelF · August 16, 2011, 9:32pm

Hi,

I’m using mootools-core-1.3.2.js & mootools-more-1.3.2.js to toggle hide/show a div
but since I started using jquery-1.4.4.js the mootools toggle stopped working
how can I fix this conflict?
Here is the jquery code I’m using on all of my pages


$().ready(function() {

    function formatItem(row) {
        return row[0] + " (" + row[1] + ")";
    }
    function formatResult(row) {
        return row[0].replace(/(<.+?>)/gi, '');
    }
    $('#suggest4').autocomplete('/index.php?action=autocomplete', {
        width: 300,
        matchContains: true,
        formatItem: formatItem,
        }).result(function(event, row) {
               location.href = "/" + row[2] ;
        });

    $("#clear").click(function() {
        $(":input").unautocomplete();
    });
});

and this is the mootols code I use on one of my pages

//<![CDATA[
  window.addEvent('load', function() {
  var mySlider = new Fx.Slide('myDiv');
$('toggle').addEvent('click', function(e) {
    e.stop();
    mySlider.toggle();
});
mySlider.slideOut();
  });
  //]]>

Thanks for your help:)

Anthony_Barnes · August 16, 2011, 10:21pm

jQuery provides a function that allows it to ‘play nice’ with other libraries:
jQuery.noConflict() – jQuery API

You can also pass in the jQuery object to a closure so your existing code still works:


jQuery.noConflict();
(function($) { 
$().ready(function() {
 
    function formatItem(row) {
        return row[0] + " (" + row[1] + ")";
    }
    function formatResult(row) {
        return row[0].replace(/(<.+?>)/gi, '');
    }
    $('#suggest4').autocomplete('/index.php?action=autocomplete', {
        width: 300,
        matchContains: true,
        formatItem: formatItem,
        }).result(function(event, row) {
               location.href = "/" + row[2] ;
        });
 
    $("#clear").click(function() {
        $(":input").unautocomplete();
    });
});
})(jQuery);

JoelF · August 16, 2011, 10:49pm

Thanks so much Anthony for your quick reply! it works beautiful!

however I just noticed that the fix doesn’t help for IE (checked in ie8) the mootools toggle/slider isn’t fixed with the noConflict, when I disable the jquery autocomplete, the toggle works fine but together it doesn’t work

(and as I was looking in ie I realized that the entire jquery autocomplete doesn’t work, any idea?)

Thanks again for your help

Joel

Anthony_Barnes · August 16, 2011, 11:44pm

You have an unnecessary comma here:


formatItem: formatItem,

IE is quite strict about this sort of thing and will break (You probably have a syntax error being reported somewhere). I use:
JSHint, A JavaScript Code Quality Tool or [url=http://jslint.com/]JSLint,The JavaScript Code Quality Tool to validate code, it’ll save you alot of headaches. (JSHint is a fork of JSLint, I kinda like where it’s going right now, it’s a bit more forgiving).

JoelF · August 17, 2011, 2:17am

oh how nice! works like a charm:) Thanks so much for the detailed help, I really didn’t think I’ll get out of this that fast
Thanks again Anthony and am glad I found this site!

JoelF · August 18, 2011, 5:46am

after being so excited I found that another jquery used on the site broke after adding the jQuery.noConflict(); function
is it proper to post a link to the site? will it help?
Thanks

Anthony_Barnes · August 18, 2011, 6:05am

I don’t think there are any issues with posting a link to the site you are working on, as long as it’s not disreputable

Quick suggestion, in the jQuery you use instead of using this format:


$('#mydivid');

try this:


jQuery('#mydivid');

I find it alot easier to avoid using the $ function where it’s possible 2 libraries might be implemented. Using jQuery.noConfict() removes $ from the global namespace so other libraries can use it meaning any code you wrote using $ referring to jQuery won’t work. You basically have to either wrap the other code in a closure that passes $ in as an argument telling it that $ is jQuery, or replace ‘$’ with ‘jQuery’ in your code (or rename the jQuery object, you can do that too).

If you aren’t sure what the closure does:


// $ === jQuery

jQuery.noConflict(); // removes $

(function($){
    // inside this closure I can write code that doesn't exist in the global namespace

   // $ === jQuery;
})(jQuery);

// $ !== jQuery

I’m probably not the best person to explain it, but the closure is an anonymous function that is being executed straight away changing the scope of all the code that sits inside it. It’s like a safe little nest for code that could possible interfere with global scope.

JoelF · August 18, 2011, 8:03pm

Here is a link to the site and [URL=“http://goo.gl/3gy83”]this page is where the mootools breaks
and after adding the noconflict part of this is an example page broke… (see where you select special options that changes content of page using ajax, above the add to cart)

few questions:
will add the noconflict to the other jquery fix this?
is there something in jquery that I can use instead of the mootools slider?
is there something like the noconflict that can do within the mootools and leave alone the jquery. (jquery is used all over the site, but the mootools slider is only on the above page)

Thanks

ParkinT · August 18, 2011, 8:14pm

Your Javascript errors are being generated by the “addthis_widget.js” from
http://s7.addthis.com/js/250/addthis_widget.js

As a quick test, remove (or remark out) that external js and test the site.

JoelF · August 18, 2011, 8:27pm

did so didn’t help, however i’m not sure to which problem you refer, I had 2 problems; #1 the mootools slider didn’t work, fixed the jquery using noConflict but problem #2 came in disabling another jquery

Anthony_Barnes · August 18, 2011, 10:43pm

is there something in jquery that I can use instead of the mootools slider?

This is probably the best idea. You might be able to find something that does the same thing in jQuery instead of mootools. Bringing in 2 libraries is going to add extra weight to your page load and cause you to spend extra time trying to get them not to conflict.

I couldn’t really comment on other options with mootools, I haven’t touched it for several years.

JoelF · August 19, 2011, 5:18pm

Thanks again Anthony for your help, I found a simple way without jquery or mootools here, works fine now and across all browsers

Coddy · May 22, 2012, 7:44pm

Hi, can someone help me to fix the conflict between jQuery and Mootools?
I’m using jQuery 1.7.2 on my website which is under develepment. But since I started using mootools.1.2.js the carousel stopped working.

Here is the carousel’s script.

var OpenArticleOnClickInactive			=	true;
var OpenArticleOnClickActive				=	true;

/* Transition Options */

var DisableTransitions							=	false;
var ImageTransitionOnPagingControls	=	false;
var ImageTransitionOnNavSelect			=	false;
var ImageTransitionSpeed						=	750;
var TitleTransitionSpeed						=	500;
var TitleTransitionOnPaging					=	true;



var Highlights; var TransitionTimer; var BubbleTimer;
String.prototype.trim=function(){return this.replace(/^\\s+|\\s+$/g,"");};

function HPHLObject(){this.title = null;this.subtitle = null;this.image = null;this.url = null;this.duration = 6;};

	$('document').ready(function(){
		Highlights = new HPHL();
		$('#HPHLNav ul li p').each(function(ind,val){$(this).css('top',(parseInt(64-$(this).innerHeight())*.5)-2+'px')});
		Highlights.Init(); $('#HPHLCurrent').on('click',function(){location.href = Highlights.GetContent()[Highlights.GetCurrentIndex()].url});
		$('#HPHLPrev').on('click',function(){Highlights.Prev();});$('#HPHLNext').on('click',function(){Highlights.Next();});
		if(!OpenArticleOnClickInactive){$('#HPHLNav ul li a').click(function(e){e.preventDefault();Highlights.Clicked(e);});}
	});

function HPHL(){
	var that = this; var contents = new Array();
	var total = function(){return $('#HPHLNav ul li').size();};
	var nextI = function(){return (currentI() == (total()-1))	?	0	:	currentI() + 1;}
	var prevI = function(){return (currentI() == 0)	?	total() - 1	:	currentI() - 1;}
	var currentI = function(){return $('#HPHLNav ul li.Active').index();}
	this.Init=function(){
		$('#HPHLNav ul li').each(function(i,e){
			var obj = new HPHLObject();	var Img = $(e).find('img');
			obj.duration = parseInt(RegExp(/Duration_([0-9]+)/).exec($(this).attr('class')).pop());
			obj.title = $(e).text().trim();	obj.url = $(e).find('a').attr('href');
			obj.subtitle = $(e).find('a').attr('title'); obj.alt = $(Img).attr('alt');
			obj.src = $(Img).attr('src');	contents.push(obj);})
		Ni = nextI();	that.SetTimer(contents[Ni].duration,Ni);}
	this.GetContent = function(){return contents;}
	this.GetTotal = function(){return total();}
	this.GetCurrentIndex = function(){return currentI();}
	this.GetNextIndex = function(){return nextI();}
	this.GetPrevIndex = function(){return prevI();}
	this.GetCurrentDuration = function(){return contents[currentI()].duration;}
	this.Next = function(){return (ImageTransitionOnPagingControls)	?	that.Transition(nextI()) :	that.Switch(nextI());}
	this.Prev = function(){return (ImageTransitionOnPagingControls)	?	that.Transition(prevI()) :	that.Switch(prevI());}
	this.Clicked = function(e){var curI = Highlights.GetCurrentIndex();	var clkI = $($(e.currentTarget).parentsUntil('li').parent()).index();
		return (clkI == curI && OpenArticleOnClickActive)
		?	location.href = that.GetContent()[curI].url
		: (ImageTransitionOnNavSelect	?	that.Transition(clkI)	:	that.Switch(clkI));}	
	
	
	this.Transition=function(i){
		if(DisableTransitions) return that.Switch(i);
		var iSpeed = ImageTransitionSpeed	?	ImageTransitionSpeed	:	'slow';
		var tSpeed = TitleTransitionSpeed	?	TitleTransitionSpeed	:	'medium';
		
		clearTimeout(BubbleTimer);		
		BubbleTimer = setTimeout(function(){
			$('#MarqueeText').animate({opacity: 0},25,function(){
				$(this).animate({top:'30px'},25,function(){
					$('#MarqueeText .HPHLSubtext').hide();
					$('#MarqueeText a').attr('title',contents[i].subtitle).attr('href',contents[i].url).html(contents[i].title);
					$('#MarqueeText .HPHLSubtext').html(contents[i].subtitle);
					$('#MarqueeText .HPHLSubtext').fadeIn(tSpeed,'swing');});
			$(this).animate({top: '0px', opacity: 1},250,'swing');});},200);
			
	$('#HPHLCurrent a').attr('title',contents[i].alt);
	$('#HPHLCurrent a').attr('href',contents[i].url);
	$('<img class="HPHLImage" alt="' + contents[i].alt + '" src="' + contents[i].src + '" />').insertBefore('#HPHLCurrent .HPHLImage:first-child');
	$('#HPHLCurrent .HPHLImage:not(:first-child)').fadeTo(iSpeed,0,function(){
		$('#HPHLCurrent .HPHLImage:not(:first-child)').remove();});
		$('#HPHLNav ul li.Active').removeClass('Active');	$($('#HPHLNav ul li').get(i)).addClass('Active');
		Ni = nextI();	that.SetTimer(contents[Ni].duration,Ni);}	
	
	
	this.Switch = function(i){
		$('#HPHLCurrent a').attr('title',contents[i].alt).attr('href',contents[i].url);
		$('#HPHLCurrent .HPHLImage').attr('alt',contents[i].alt).attr('src',contents[i].src);	
			
		$('#MarqueeText a').attr('alt',contents[i].alt).attr('href',contents[i].url).html(contents[i].title);		
		$('#MarqueeText .HPHLSubtext').html(contents[i].subtitle);
		
		$('#HPHLNav ul li.Active').removeClass('Active');	$($('#HPHLNav ul li').get(i)).addClass('Active');
		Ni = nextI();	that.SetTimer(contents[Ni].duration,Ni);}	
	this.SetTimer = function(seconds,itemIndex){clearTimeout(TransitionTimer); TransitionTimer=setTimeout('Highlights.' + (DisableTransitions ? 'Switch'	: 'Transition') + '('+itemIndex+')',(seconds*1000));}}

Coddy · May 23, 2012, 10:22am

I managed to fix the conflict. I simply replaced all $ with jQuery.

Paul_Wilkins · May 23, 2012, 10:54am

That’s the hard way of fixing the problem.

The easier way is to use jQuery’s noConflict, which tells jQuery to let go of the $ symbol.
See how to best use use noConflict in this tips & tricks post.

Coddy · May 28, 2012, 7:00pm

Thanks Paul, that was really the hard way of fixing the problem. I did as you suggested and everything works as a charm.