For those of you not in the know, there is a relatively new (about a year old) javascript library called jQuery. Over the past year I have really fallen in love with jQuery, it makes me happy coding in it, the way rails makes me happy. Sadly, Prototype now makes me feel like I feel when I am writing c# code, I’ll leave it to your imagination what that feels like.
So for a while now I have been using Prototype and jQuery together in my rails apps. I am kinda stuck with pPrototype, because it is fairly well embedded in rails. Which is fine with me because I don’t have to use it directly, just let rails render it. There is a problem with using them together though: Prototype came up with this nice function called $() which is slightly more than a shortcut to document.getElementById(). This function is the main function in Prototype. Well, John Resig, the creator of jQuery, also used to be a Prototype fan, so the main method in jQuery is also called $(). The jQuery website says that all you have to do to get them to play nice is to include jQuery after you include Prototype. Unfortunately, this is not enough. There is just a little bit more you have to do:
In the jQuery core code (which includes ajax, animations, et al.) there is a method called jQuery(). The $() method is aliased for the jQuery() in the code. This means that all you have to do is remove the part of jQuery that alias the $() method. In jQuery 1.0.4 uncompressed the lines you need to comment out start at line 60:
Change:
// Map over the $ in case of overwrite if ( typeof $ != “undefined” ) jQuery._$ = $;
// Map the jQuery namespace to the ‘$’ one var $ = jQuery;
To:
// Map over the $ in case of overwrite //if ( typeof $ != “undefined” ) //jQuery._$ = $;
// Map the jQuery namespace to the ‘$’ one //var $ = jQuery;
Once this is done, jQuery will no longer interfere with Prototype. You will have to use the jQuery() method to create a jQuery object, unless you alias the method to something else. I alias it to jq like this:
Change:
var $ = jQuery;
To:
var jq = jQuery;
One last thing: Although all of the core uses JQuery() internally, there is no guaranty that any plugin will do the same, in my experience none do. The solution that works for me is to do a find/replace in the downloaded plugin, replacing any $( with jQuery(.
That’s it. Now you can easily use jQuery and prototype in your rails app, even in the same view. I regularly use in_line_edit (which produces Prototype code) and jQuery in the same view, no problems.
If you wanted it to build a product you’d find a way to get time to work on it. If you really wanted to start that new hobby you’d sacrifice something to find the time and money to do it.
I'll define a "Wannabe Entrepreneur" as someone who has never made money from their businesses. Here are the different types of wannabes.
In the past few years I've built go-carts, built a 200+ sq ft workshop, written several eBooks. How do I create a life where I have time to work on side projects?
Receive 5 Software projects mistakes we have made over the years and how to avoid them.
7 Comments
Hey Steve, it’s me again. Excellent post, fulfilling one specialized, unique need in a clear and simple way.
A nitpick, though: you alternately refer to jQuery as jquery, jQuery, and JQuery. JQuery is actually an eclipse plugin for Java development; I’ll point you to an InfoWorld article that gets it right.
Also, I reckon it looks cleaner if you alias jQuery() to _$(), although it is slightly harder to see if you’ve corrected it or not. Luckily I have good old Venkman to tell me what’s wrong.
Look forward to more posts in the future!
—Sohum
Vote for me.
And I like just aliasing jQuery to ~.
you can use a single underscore: _
but that’s probably a bit confusing (doesnt take up much space)
Also, you might want to search-and-replace ‘$.’, as many plugins apparently use the namespace internally.
(Thanks Katz — as a comment on my blog)
just to let you know, my own instinct was also to use ‘jq()’ as the alias:
1: it has some sort of resonance with ‘jQuery’ (unlike ‘$’)
2: it’s easy to pick up on as first time user when you see an import called ‘jquery.js’
3: it looks nicer
4: it’s only 1 more character than ‘$’…
so, big thumbs up to that small point.
As well, there is a nice little function that JQuery has now, might not been around in the time of this writting:
$j = JQuery.noConflict()
$j can be what ever you wish.. :)
Thanks Dave. I always meant to update this post, but I guess I never have. :P