Using scriptaculous and thickbox together

We all well aware of the two biggest names in JavaScript framework family is Prototype and jQuery (Unordered, if by any chance anyone might think why I mentioned prototype first). When it comes to Web application development these two JS framework simply just blessings, depend on situation and methodology. I have used both Prototype and jQuery in numerous applications, just not at the same time until recently.

I always liked the syntax simplicity of jQuery yet felt the needs of Prototype library in addition to jQuery goodness. Unfortunately had to always keep them apart due to syntax conflict, the use $ in two different manner. Imagine the power of jQuery and Prototype harnessed together into you application, nothing but sleek and smooth stuffs.

But hey that isn’t a day dreaming any more, looks like the folks at jQuery figured out a way to use their library with other JS libraries, primarily with Prototype library (MooTools works like magic as well). Well what’s the solution? Very simple actually, some adjustment in your script declaration order and a jQuery function call jQuery.noConflict().

They mentioned several ways to getting the job done, but the bottom line is just straight:

1) In document head Library declaration jQuery will be last in order (after Prototype/MooTools etc.)
2) Replace “$”, which used as a short cut for “jQuery” to something else that won’t conflict with other library(s).

Sounds confusing? Well, no worries, it’s a lot easier than it sounds. A demo might clear things up. On this example let’s try working with “Thickbox”, the popular web UI dialog widget based on jQuery and “script.aculo.us” the most easy-to-use, cross-browser user interface JavaScript libraries to make things cool.

On your document head section your declaration should look something like this (make sure you change the location of your script as necessary):

< script src="prototype.js">< /script>
< script src="jquery.js">< /script>
< script> jQuery.noConflict();< /script>
< script type="text/javascript" src="thickbox.js">< /script>
< script src="scriptaculous.js" type="text/javascript">< /script>

Now open up the thickbox.js place the following code just below “var tb_pathToImage=…….”

(function($) {

Almost done here, now scroll at the end of the file and place ”})(jQuery);” . That’s about it, unless you got any other jQuery function calls somewhere in the document body. This simple peace of trick allow you to use scriptaculous and thickbox seamlessly by changing jQuery function short cut from $ to “jQuery”. See that wasn’t so bad after all. 🙂