Working together with jQuery and MooTools

jQuery and mootoolsIf you are also stuck with JavaScript framework wars and are in trouble trying to make it work together, here is a good tip. I recently was working with a WordPress Theme for a client and had to build a plugin. I have been a fan of jQuery and immediately started using it to create the small plugin for the site. It worked great!

Then came another request. Why don’t you keep a featured post? I researched a bit and landed on the revolution’s Featured Gallery Plugin. Unfortunately, that was built in MooTools. I didn’t realize this at first place. I installed the plugin and then it is not working!

I spent quite sometime trying to find out the cause. I then deleted jQuery codes and voila the plugin works perfectly. Once I figured this out, I was in bit of a trouble. Do I have to rebuild the whole thing now in MooTools? But I don’t know MooTools.

I was sure someone had had this problem, there is always. :)

So, I googled about it only to find a LOT of blog posts, forum threads that suggested to just stick to one, you CANNOT make them work together, etc. I was about to give up when I finally landed up on jQuery article. Yep, I didn’t check their site before. Silly me!

It was a simple fix. Thanks to jQuery guys.  All you had to do was add this little line after all the libraries got loaded.

jQuery.noConflict();

The conflict happens mainly due to similar function names but parsing params differently. If you landed up here after searching as I was, you made your day! :)

Congratulations!

14 thoughts on “Working together with jQuery and MooTools

  1. Ahh, I have the same problem.. I was trying to get featured content gallery plugin working with suckerfish..

    How would I change suckerfish and any other jquery to work with mootools? Just add that line to the code?

  2. Thanks for sharing! I know little to nothing about programmings o my question is: On which file do I add the jQuery.noConflict(); …and would that be the same if I have several jquery plugins?

    • You should apply on the document ready function (inside that, first line) that you call on the very beginning.. homepage most probably..

  3. Hi Chandra,

    Where exactly do I place the Featured Content Gallery code below into your SimpleX theme to make it work?

    I’m new to WordPress and themes. Have already installed Featured Content Gallery plugin and activated it. After watching the FCG setup video, I’m lost as to which page of SimpleX template themes as seen in WordPress Themes Editor should contain the FCG code.

    I’ve randomly placed it in the single.php and index.php pages but nothing happens.

    All the php code scares the bejeezes outta me.

    Your help is greatly appreciated.

    • Hey JD,

      I haven’t tried it yet. Isn’t it clearly mentioned in the video? SimpleX uses codes that are very similar to default WordPress theme so it shouldn’t be that hard to find where to copy over the code.

      Can you post the link to that plugin so I can take a look?

      Thanks,
      Chandra

  4. Hi,

    I had a problem where $ wasn’t working in the Admin pages.

    The jQuery.noConflict(); won’t help with that, it basically just disables the $ so that other libraries can use it.

    The only way I’ve been able to solve my problem is to not use $, but to use the full jQuery instead. Very annoying!

  5. HI

    Could you please explain in simple terms where to put the jQuery.noConflict(); code when working with Simplex in combination with FCG? It all seems to work quite well in Firefox, but the gallery gets messed up in IE. Also, a white band is introduced over the header.

    Some help would be greatly appreciated. Thanks!

  6. Ok, sorted it out. In header.php you have to put:

    jQuery.noConflict();

    After:

    <script src="/js/jquery-1.2.6.min.js” type=”text/javascript” charset=”utf-8″>

    Cheers.

  7. is not really clear, but I got it.
    at the beginning add:
    var $j = jQuery.noConflict();

    then if you have:
    (document).ready(function() {

    replace it by:
    $j(document).ready(function() {

    and so on…