Running jQuery with Other Frameworks Via noConflict

Published July 7, 2009 by CSS Newbies.

Photo "Chess" by Romainguy. Used under a Creative Commons license.

While jQuery is certainly a popular JavaScript framework, it’s by no means the only game in town. Other frameworks such as Prototype, MooTools, Dojo and many others all have their own strengths, weaknesses, and devoted groupies.

Generally speaking, these frameworks all play well together — you can mix and match framework functionality to your heart’s content, as long as you don’t mind the additional overhead of loading several libraries simultaneously. So you have a calendar widget in jQuery that you love, but you’re already using Prototype to animate your navigation bar? Don’t be shy… use both!

Of course, every once in a while you can run in to problems when combining JS frameworks — particularly (in my experience) when combining jQuery and Prototype. Luckily, jQuery was kind enough to provide us with a workaround.

The Problem: Sharing Syntax

The most common compatibility problem stems from both jQuery and Prototype using the same shortcut syntax: namely, the $().doSomething syntax. Here’s a sample line of code in jQuery:

$('#myelement').addClass('active');

And the same functionality in Prototype:

$('myelement').addClassName('active');

Note the basic similarity? Both frameworks claim the dollar sign notation for themselves, which can wreak havoc on snippets of code dropped willy-nilly into a website. If your jQuery code is grabbed up by Prototype, things will stop working fast. And similarly, if your Prototype code is snagged by jQuery, not even the awesome power of jQuery will be enough to overcome the code confusion.

The Solution: noConflict Mode

But not to worry! jQuery has provided us with a workaround called “noConflict mode.”

By default, there are two equally correct ways to call a jQuery function — the dollar sign notation, and “jQuery” notation:

$('#myelement').show();
jQuery('#myelement').show();

Both of the lines above do exactly the same thing. However, most people use and prefer the dollar sign notation. Why? Probably because it’s shorter, and if web developers didn’t care about brevity in their code, they probably wouldn’t have used a framework in the first place.

Of course, just using the longer jQuery notation isn’t enough. If jQuery has already claimed the dollar sign for itself, any Prototype functionality relying on that notation will still be grabbed by jQuery.

This is where the noConflict function comes in handy. Simply run the following line after both Prototype and jQuery have been loaded:

jQuery.noConflict();

This will cause jQuery to give up the dollar-sign notation, allowing the other library to take it over. And you can still use your jQuery snippet, provided you change all instances of $() to jQuery().

Keeping it Short

The noConflict mode does have one other bit of functionality that I’ve found useful in some of my projects: you can select a different variable to use instead of the standard “jQuery”. The usage looks like this:

var $j = jQuery.noConflict();

Now in addition to using the default jQuery() notation, I can also use the shorter $j() notation. This allows me to avoid running into problems with other frameworks, while still enjoying almost the same conciseness in my code.

10 Responses

  1. Scott (reply)

    Thanks, Rob. I had never run into the noConflict() function before. Good to know.

    But really. What CAN’T you do with jQuery that would make you want to use anything else? :)

  2. nick (reply)

    being new in this whole js libraries, i guess some of the unresolved/unexplained problems i had some time ago with using two different libraries are now explained. :P

  3. Aj (reply)

    You are awesome. Thanks so much for these tips. I just started learning the basics of js. I’m going to give this a try and see if it works. Thanks!

  4. Prodyot (reply)

    Very helpful tip.
    I would have run into many conflicts in the next few days had I not read this tutorial.
    Thanks Rob for saving me from nightmares.

  5. Jonathan (reply)

    Oh… my…. word….

    Thank, YOU!!!! I have been pulling my hair out trying to get an accordion script using prototype to work with everything else which is jquery. I’m not a JS expert, so you taking the time to explain it helped me ALOT.

    One thing that I’m sure most of you know, but it was giving me alot of trouble, is you apparently have to load prototype first, THEN jquery, then your jQuery.noConflict(); . I had jquery first then prototype (and 4 other external JS files) and they still weren’t playing well together. Swapped it and all is well.

    Thanks again!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>