How to Make JQuery & Prototype Play Nice

31. Mar, 2009 9 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
, , , ,

9 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.

  4. Nirmal 19. Apr, 2010 at 12:23 am

    The dollar symbol spoiled my whole morning until I came across your post. Thank you!

  5. David Lano 19. Apr, 2010 at 8:03 am

    @Nirmal – I’m so happy I was able to help!

  6. Joe 01. May, 2010 at 11:51 pm

    Thanks! I need to mix jquery & prototype, and your short post, along with the insightful comments, make it clear and easy!

  7. Daniel Tome 31. May, 2010 at 6:33 pm

    I’ve noticed that you can’t use the jquery UI plugins when you have prototype. Because the plugins use the $ dollar sign.
    It would be good if we were able to change the prototype $ to use something else.

  8. Nirmal 01. Jun, 2010 at 5:16 am

    @Daniel

    Uh oh! I thought all the problems are solved once for all by that magic line.

  9. David Lano 04. Jun, 2010 at 7:16 am

    @Daniel, @Nirmal – You can also change the $ dollar sign for other libraries like Prototype. Check out this link: http://docs.jquery.com/Using_jQuery_with_Other_Libraries

Leave a Reply