Using jQuery and MooTools Together

Definitely will be referring back to this. Thanks, David!

First and foremost, we, as web developers should always make an effort to only use one library – and put forth the time and effort to only utilize ONE library at a time. If someone wants a jquery plugin, they should rewrite it for mootools. If they want a class from mootools, that should write it for jquery.

I’m seeing an increase of people who just look at what the libraries are doing, and throw them all together on one page “just because it’s easier” – if someone sees this as a viable option as opposed to actually doing the work of rewriting javascript for one library, they really shouldn’t be in the web dev profession.

I’d like to accentuate the “just because it’s easier” – as it does happen sometimes where you’re put in a situation where rewriting a mootools class or a jquery plugin isn’t feasible (generally speaking, time constraints coupled with financial issues), so it’s bound to happen. I just hope web developers don’t look at the “noConflict()” option as a “I can always be lazy” and do their best to utilize one library.

And I’m totally with you on knowing more than one – and rewriting jQuery for MooTools and vice-versa has been my best method to learning and understanding how the two libraries function.

Great Article. There’s actually some really well-done web pages that make use of both libraries. Like a certain David Walsh.

I agree with @keif entirely. Choose a library and use it. There are very few reasons to use more than one. The only reason that I can think of is if you’re in the process of migrating a project from one to the other. If you need to continue working with the old library while you port to the new one, it makes sense. Otherwise you’re basically saying that you don’t care if your users have to deal with your bloated pages.

The majority of my work tends to be “built from scratch” so I can just use one – but as clients come back down the road with both the old code mixed with new code, and they ask “why does it take forever to download my home page?” …which is kind of obvious when they have full libraries of uncompressed javascript.

Granted, it’s less of an issue if JS is minified and gzipped, but that’s not always an option , and I’m all about squeezing every byte of possible juice out of a download (which is also why I prefer working with one framework).

A perfect example of something crazy:
http://www.nintendo.com/games/guide#qhardware=Wii&qesrbRating=&qplay=&qgenre=&qrelease=&panel=qgenre
(from Ajaxian) MooTools, DoJo, swfobject, et. al. Yes, it’s gzipped, but god awful, slow and horrendous.

It was the first time in the history of ever I actually sent a company an email about their site. And even worse, it started with:

“Nintendo, I never thought I’d say this, but I’m disappointed in you.”

I wish. I never received a follow-up.

Thus dashes my hopes that Nintendo would go “hey, we need to hire that guy!”

You can also write that is most clear in the code :

<script type=”text/javascript”>
var JQ = jQuery.noConflict();
</script>

and then put JQ in place of $ in the code :

JQ(‘p’).css(‘color’,'#ff0000′);

@thomtom
To change jQuery reference you should write like this:

var JQ = jQuery.noConflict(true);

No, because with this method, the variable “$” and “jQuery” are replaced by JQ. In this code, with the mootools framework, we want to change the variable $. So var JQ=jQuery.noConflict();

@thomtom
To change jQuery reference you need the “true”
i think you should look here:
link text

Yes if you want to use different jQuery framework as Yahoo.query and dojo.query simultaneously. Out here is to combine mootools and jQuery. Otherwise some jQuery plugin will not work and should be changed. And it would be tedious to maintain the code if there are updates plugins.

Look that, but it’s in french :

You must be some sort of voodoo wizard monster

@keif and @aaron

I agree, but maybe not all the guys are so lucky to have enough time and money to spend porting classes from other libraries, nor to study other libraries…

@Luca:

It’s never a matter of money – it’s a matter of skill! (har har)

I’m not paid to learn at work – I use free time to learn other libraries and expand my skill sets, so when the issues arrive, I can just do it versus learn to do it – “money and time” are two things that are highly stressed to keep low – “fast and cheap” – so I wouldn’t exactly say the company I work for thrives on having clients pay for my learning experiences – they pay for my expertise.

As well, you should explain to clients the caveat of meshing multiple libraries together, and the benefits of paying to have it all consolidated in one. “Not knowing how” is the perfect reason to learn how, so you become more valuable as a developer.

Why do they both use $?

If by fun you mean random cursing and the sudden urge to pull your hair out then yes, immense fun!

What should I do when I can’t split jQuery and Mootools part of code? I mean when I’m using some onclick functions made in jQuery after Mootools stuff?

Mixing jQuery and Mootools is fine. Development in mootools is all about classes, inheritance, etc… The two overlap in some areas but in my experience people are usually using jQuery or YUI for the effects.

I’m new to mootools, I come from the jQuery world and I’m really frustrated. Why is there so little useful documentation for mootools? And the plugins are even worse, take multibox; I’m using it at work and how does one use it?

Seriously I think mootools needs better doc, esp for some1 starting out.

Where would I go to learn something about mootools like how to use it?

I’m sorry I’m a bit bitter, but I think its for good reason.

There is also a MooTools book you can buy. Criticizing us for a lack of documentation on 3rd party widgets isn’t exactly fair.

Hello David, thanks for the tutorial as it came in very handy, but i noticed the jQuery.noConflict(); works fine with IE but does not work will mozilla ff, safari even chrome. working on a site with 2 controls that are so perfect for my site but each of ‘em is written in mootools and jquery.

What can i do to fix this bug. thanks

Thanks a lot, very useful :-)

@keif: A load of incomprehensible angry stuff came out my mouth when I read your initial post, but I figured I’d save the flame and say blandly “I quite disagree”.

Upon reflection, I admire what you are getting at. But this is the real world, and actually if you take your argument to its logical conclusion, one could reasonably suggest that to use a library *at all* is sheer laziness and if you have to rely on one then you are clearly not a web developer and should stick to painting daisies, because a real web developer wouldn’t use a bunch of redundant code when he could be custom-designing his own libraries that do only what he wants them to do and not a whole bunch of other stuff.

Which is why your comment may come across to some as, shall we say, a little puritanical.

Back in the real world, sometimes people who put systems together (be if for themselves or for clients) simply do things for the sake of convenience. And yes they satisfy the contract they were paid for, they sleep soundly at night, and the world keeps spinning.

Hey David!

Thx a lot for this example – you’re great man!

nice solution. solves the problem for me.

Can’t you do the noConflict and closure in one:


(function($){
// $
})( jQuery.noConflict() );


@keif: I agree (mostly) from a developers perspective. The problem is, unfortunately, more complex.

Take for example, Joomla. A great CMS tool that uses (among others) mootools as a JS Framework. Put in the hands of a developer, this is not a problem, but in the hands of a user or worse :) a power user… well they may need a specific pre-built tool/plugin that does not exist for mootools but does for jQuery (another amazing JS framework)… what do they do? write one themselves and risk an even worse situation of poor, unsafe coding practices almost exclusively filled with Google found code snipits… eww.

There has always been a battle of the ideal vs the practical and this is no exception. All I can say is that I really appreciate the efforts to solve problems like these with creative, innovative and elegant solutions from professionals that know the difference.

Thanks thomtom for the noconflict code.

@Qohelet: thanks for example

The man complaining about using mootools and jquery together. What gets me is that someone can say that using two libraries is not good. Even when load times are fast. I thought the whole idea of these frame works was to make things easier. I am using mootools and jquery together. I may be needing to convert it all to jquery, but I would rather it all worked and I didnt need to do this. The time spent converting the code, can be utilized in better ways. Like going to the pub or playing football, and having a life. I would rather not convert it as it gives me a headache. Obviously you set your own standards about this, but I think the word Nerd springs to mind.

Also I do know what you mean about the Nintendo site. But that is when you would see a problem and try and fix it. Most cases JQuery and mootools are fast enough. Also at the end of the day javascript is javascript. We all use bits of code we have acquired over time that is not our own. Load times are important, but to rewrite it all I dont understand. Especially when it serves its function. If I went to someone like a client and said I am going to have to rewrite your code because you are using jquery and mootools together, then they would have to cost it and it would be an expense that they didnt need. They would also ask why and what is mootools and jquery. I think they would not agree to rewrite the code, just because I feel it is the correct way of doing things. Esspecially when there isnt a problem.