Recently I wrote quite a huge chunk of jQuery for a website and it worked fine. A few days later I checked back to make sure that everything was working correctly after modifying a few things, but to my surprise none of the jQuery code worked. The problem was that I had added some Mootools code, the Mootools code worked fine but the jQuery code did not. I done some searching and found that the two libraries were conflicting and all it takes is 2 extra lines of code to prevent this from happening.

If you was to include jQuery and Mootools together this code below would not work:

$(document).ready(function(){
    alert("Hello World!");
});

But if we simply add jQuery(function($){ and }); then this code would work the way that we have intended.

The code would look like this:

jQuery(function($){
    $(document).ready(function(){
        alert("Hello World!");
    });
});

More information

I hope you found this quick tip useful, you can find out more about jQuery conflicts here.

Feel free to leave a comment with your thoughts.

Related posts:

1. Cheat sheets: jQuery, MooTools, Prototype Javascript frameworks like jQuery, MooTools and Prototype are being...
2. Twitter-like pagination using CodeIgniter and jQuery If you use Twitter you'll notice that there is a...
3. Deep Linking with jQuery You can view a demo and download the resources...
4. Adding security to CodeIgniter forms with a custom library class The class that we are going to create within CI...
5. PHP gallery with no page reloads using jQuery For this tutorial we will be using the ImgBrowz0r class...

Related posts brought to you by Yet Another Related Posts Plugin.