How to use jQuery and MooTools Together

Recently I was working on an adopted project for a client which already utilised the MooTools javascript library. The additional development I was responsible for required the jQuery library. These two javascript libraries work great individually but you can run into problems when you try and combine the two. This problem caused me some head scratching so I thought I would share the solution with you.

Before:

  $.ready(function(){
    $('select#numThumbs').change(function(){
    document.gallery.action = "<?php echo base_url(); ?>index.php/gallery/updateThumbs";
    document.gallery.submit();
      
      return false;
    });
    });  

After: This is where jQuery.noConflict(); comes to the rescue!

jQuery.noConflict();
  jQuery().ready(function(){
    jQuery('select#numThumbs').change(function(){
    document.gallery.action = "<?php echo base_url(); ?>index.php/gallery/updateThumbs";
    document.gallery.submit();
      
      return false;
      
    });
    });  

About this entry