SitePoint Sponsor

User Tag List

Results 1 to 16 of 16
  1. #1
    SitePoint Member
    Join Date
    Aug 2011
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    JQuery Mootools conflict - How to fix

    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

    Code:
     
    $().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

    Code:
    //<![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

  2. #2
    SitePoint Enthusiast Anthony.Barnes's Avatar
    Join Date
    Aug 2011
    Location
    Canberra, Australia
    Posts
    80
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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:

    Code JavaScript:
    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);

  3. #3
    SitePoint Member
    Join Date
    Aug 2011
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  4. #4
    SitePoint Enthusiast Anthony.Barnes's Avatar
    Join Date
    Aug 2011
    Location
    Canberra, Australia
    Posts
    80
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You have an unnecessary comma here:

    Code:
    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 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).

  5. #5
    SitePoint Member
    Join Date
    Aug 2011
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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!

  6. #6
    SitePoint Member
    Join Date
    Aug 2011
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  7. #7
    SitePoint Enthusiast Anthony.Barnes's Avatar
    Join Date
    Aug 2011
    Location
    Canberra, Australia
    Posts
    80
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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 :P

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

    Code JavaScript:
    $('#mydivid');
    try this:
    Code JavaScript:
    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:
    Code JavaScript:
    // $ === 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.

  8. #8
    SitePoint Member
    Join Date
    Aug 2011
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here is a link to the site and 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

  9. #9
    Avid Logophile silver trophy
    ParkinT's Avatar
    Join Date
    May 2006
    Location
    Central Florida
    Posts
    2,337
    Mentioned
    192 Post(s)
    Tagged
    4 Thread(s)
    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.
    Don't be yourself. Be someone a little nicer. -Mignon McLaughlin, journalist and author (1913-1983)


    Git is for EVERYONE
    Literally, the best app for readers.
    Make Your P@ssw0rd Secure
    Leveraging SubDomains

  10. #10
    SitePoint Member
    Join Date
    Aug 2011
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ParkinT View Post
    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.
    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

  11. #11
    SitePoint Enthusiast Anthony.Barnes's Avatar
    Join Date
    Aug 2011
    Location
    Canberra, Australia
    Posts
    80
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  12. #12
    SitePoint Member
    Join Date
    Aug 2011
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks again Anthony for your help, I found a simple way without jquery or mootools here, works fine now and across all browsers

  13. #13
    SitePoint Member
    Join Date
    May 2012
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to fix the jQuery and Mootools conflict

    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.

    Code:
    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));}}

  14. #14
    SitePoint Member
    Join Date
    May 2012
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I managed to fix the conflict. I simply replaced all $ with jQuery.

  15. #15
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,718
    Mentioned
    103 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Coddy View Post
    I managed to fix the conflict. I simply replaced all $ with jQuery.
    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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  16. #16
    SitePoint Member
    Join Date
    May 2012
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul, that was really the hard way of fixing the problem. I did as you suggested and everything works as a charm.


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •