How to Make JQuery & Prototype Play Nice

Web Development Mar 31, 2009 32 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.

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

  1. Reply Josh Powell says:

    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. Reply David Lano says:

    @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. Reply Matthias says:

    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. Reply Nirmal says:

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

  5. Reply David Lano says:

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

  6. Reply Joe says:

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

  7. Reply Daniel Tome says:

    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. Reply Nirmal says:

    @Daniel

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

  9. Reply David Lano says:

    @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

  10. Reply Alex Indigo says:

    @David: There is no information how to change other libs $ function.

  11. Reply Joseph O says:

    There are plenty of sites offering similar fixes with little variation to the above. I have tried them all, and still using prototype and jQuery with no success. I am willing to pay to have the problem solved at this point. jQuery is not my native tongue.

    My menu is run on jQuery and light box is activated through prototype. Every variation of no.conflict still has conflicts unless I am applying it all wrong. Help is now required after three weeks of pain.

  12. Reply David Lano says:

    @ Joseph O – Hmm, that’s super frustrating =/ Can you send me a message via my contact form (http://www.davidlano.com/contact/) and provide me with a link to your site. I’d be happy to try and help you out…I can’t guarantee success but I’d love to be able to give it a try.

  13. Reply Alex says:

    Joseph/David, Did you get to the bottom of it?

    I’m running Magento which requires prototype. I have a JQuery script that works perfectly when prototype isn’t included but messes up (although still runs) when prototype is included.

    I have tried all the methods mentioned, but still no joy.

    I too would be happy to pay for the solution.

    Regards,

    Alex.

  14. Reply David Lano says:

    @Alex – basically you have to include this: “jQuery.noConflict();” (minus the quotes obviously) at the top of your jquery script. Then replace all the $ signs in your jQuery with “jQuery” (without quotes). The conflict takes place with the $ sign. Both prototype and jQuery use these…so by doing the no conflict and replacing the $ signs in your jQuery you’re making it unique. I hope this helps!

  15. Reply Spare Parts says:

    How about running two different versions of jQuery on the same page.
    I’ve tried using the noConflict trick for that but I can only get one instance of jQuery to run. Any ideas.

    Best regards Tony

  16. Reply angel says:

    you can do

    var $j=JQuery;

    now use it

    $j(document).ready(function(){
    $j(“div”).hide();
    });

  17. Reply Marq says:

    I’m having similar trouble. I’m using jQuery for a slideshow and leightbox for text box effects. The leightbox application uses prototype. I don’t know what exactly is solving the problem but I tried a few things and managed to get both jQuery and prototype/leightbox working in every browser but Internet Explorer. I.E. is giving me a stack overflow error. Any thoughts?

  18. Reply nashbash says:

    Hi David,

    Here’s my code in my header that calls all my javascript:

    //
    //
    //
    //
    //
    //
    //
    //

    //

    To resolve this conflict, are you saying that I need to go into every javascript listed above & add this line at the top of the script:

    jQuery.noConflict();

    ….and also replace all “$” with “jQuery”?

    Do I truly need to edit every script?

    I’m banging my head on this stuff all day. I’m so tired & weary of it. I don’t even understand what people are saying is the resolution. My conflict is that my homepageslideshow is conflicting with my tabs. So I was trying to put this noconflict code near those….but I can’t get anything to work for me. So frustrating.

    I hope you can offer me some help.

    Thanks a lot.

    -nb

  19. Reply nashbash says:

    Hi David,

    Here’s my code in my header that calls all my javascript:
    <!–
    //
    //
    //
    //
    //
    //
    //
    //

    //
    –>

    To resolve this conflict, are you saying that I need to go into every javascript listed above & add this line at the top of the script:

    jQuery.noConflict();

    ….and also replace all “$” with “jQuery”?

    Do I truly need to edit every script?

    I’m banging my head on this stuff all day. I’m so tired & weary of it. I don’t even understand what people are saying is the resolution. My conflict is that my homepageslideshow is conflicting with my tabs. So I was trying to put this noconflict code near those….but I can’t get anything to work for me. So frustrating.

    I hope you can offer me some help.

    Thanks a lot.

    -tracy

  20. Reply nashbash says:

    okay, so i’m trying to send you my source. hopefully this will show. i changed all the you-know-whats to “scrit”. :)
    //
    //
    //
    //
    //
    //
    //
    //

    //

  21. Reply nashbash says:

    type=”text/javascript” src=”/scripts/jquery-1.3.2.min.js”>
    type=”text/javascript” src=”/scripts/jqueryCarousel.min.js”>
    type=”text/javascript” src=”/scripts/jqueryDefault.js”>
    type=”text/javascript” src=”/scripts/jquery.jalert.js”>
    type=”text/javascript” src=”/scripts/macStyles.js”>
    type=”text/javascript” src=”/scripts/search.js”>
    src=”/scripts/sifr.js” type=”text/javascript”>
    src=”/scripts/sifr-config.js” type=”text/javascript”>
    type=”text/javascript” src=”/scripts/homepageslideshow.js” >
    type=”text/javascript” src=”/scripts/jqueryTabs2.min.js”>

  22. Reply ScanSnap S1500 says:

    Amazing information. Genuinely looking forward to reading more. Thanks.

  23. Reply Justin says:

    The problem however is that you have to replace every $ in all the Jquery scripts you are using. Which is a lot of work.

  24. Reply Mitch says:

    I have been trying to fix this problem all morning.
    Your blogpost helped me out within a minute.
    Thanks :)

  25. Reply Manish says:

    You post made my day!! Thanks!

  26. Reply Zack Ng says:

    thanks for this post! I spent 2 hours trying to use jquery and jquerytool

  27. Reply Nitin says:

    hi…thanks for this script i have been looking this for long time…..

  28. Reply Doug says:

    This looks very helpful, but I’m a bit confused about something. I have some older stuff that uses Prototype.

    I would like to use Jquery UI tag-it, but am running into this problem.

    I’m not clear how this will help if there are so many functions in Jquery UI and tag-it which make use of $.

    Right now $(“#mytags”) is evaluating as null because of the conflict with Prototype I think.

    Any advice would be welcome.

    Thanks!

    doug

  29. Reply SAM says:

    Thanks a lot

  30. Reply nachiket says:

    hi i have j query conflict with prototype.js and magicscroll.js i have try all above solution but can’t find solution

    ReferenceError: JQuery is not defined
    [Break On This Error]

    var $j=JQuery;

    this above error when i use angle solution.

    ReferenceError: jQuery is not defined
    jQuery.noConflict();

    above error when i use matthias solution

    please can any body explaine me how to overcome from this conflicting problem

    please mail me if you have solution

  31. Reply hoc lai xe oto b2 hanoi gia re says:

    if use more than 2 jquery. should declare new var

  32. Reply Siya says:

    Thanks alot bud, this save me 5 hours work.

Leave a Reply