How to Make JQuery & Prototype Play Nice

31. Mar, 2009 3 Comments

JQuery + Prototype

I’m sure you’ve seen some of the sweetness of JQuery and most likely you’ve used Prototype for dynamic web applications like Lightview, Prototip, etc. However, let’s say we want to use the two together, on the same page. Problemo!

The Problem

JQuery uses a “$” as a shortcut for “jQuery” and Prototype uses “$” as well. We can’t have JQuery and Prototype using the same “$” namespace.

The Fix

Thankfully JQuery has a neat little function called jQuery.noConflict( ) which you basically just need to stick at the top of your JQuery file and replace the “$” alias with “jQuery” for each function. Example:

jQuery.noConflict();
// Do something with jQuery
jQuery("div p").hide();
// Do something with another library's $()
$("content").style.display = 'none';

Of course, there are other ways of solving this issue with jQuery.noConflict( ), but the method above was the most simple and straightforward for me.

NOTE: JQuery doesn’t get along with MooTools and YUI very well either, luckily this can also be solved with the jQuery.noConflict( ) trick.

Let me know if you have any questions or run across any other issues while using JQuery and Prototype. I have a feeling the more popular JQuery becomes, the more and more people will run into this issue.

Twitter Digg Delicious Stumbleupon Technorati Facebook
Web Development
, , , ,

3 Responses to “How to Make JQuery & Prototype Play Nice”

  1. Josh Powell 31. Mar, 2009 at 4:50 pm

    Good description of making them play nicely together. Just two things to add.

    1)

    $j = jQuery.noConflict()

    will let you use $j instead of jQuery, shorter and easier to type and

    2) Only jQuery lets you place nicely with other libraries. mooTools and Prototype do not play nicely with each other at all.

  2. David Lano 31. Mar, 2009 at 4:55 pm

    @Josh – Thanks for those additions! I took a look at your blog and it looks like your an expert in JQuery – I’ll definitely be subscribing to your posts. Thanks :)

  3. Matthias 02. Apr, 2009 at 2:22 pm

    You could make it even shorter with this statement:

    jQuery.noConflict();

    (function($) {

    $(“#myId”).makethings…

    })(jQuery);

    But nice blogpost for beginners who are not familiar with the noConflict method.

    Cheers.

Leave a Reply