getting thickbox, jquery, and prototype to play together nicely

The latest version of the JumpBox admin interface uses ThickBox for its cool visual effects, and prototype for handling AJAX requests. The problem is that ThickBox depends on jQuery, and jQuery and prototype don’t like working together.

Both jQuery and prototype define “$” as an alias in the global namespace. When you try to use the “$” shortcut and both libraries are included, the browser complains. Lucky jQuery gives you a way to override “$” and let prototype use it thus resolving the conflict:

 <html>
 <head>
   <script src="prototype.js"></script>
   <script src="jquery.js"></script>
   <script>
     jQuery.noConflict();
   </script>
 </head>
 <body>
 </html>

After calling jQuery.noConflict(), you can still use jQuery “$” functionality, but you have to call it using “jQuery(’foo’)” instead of “$(’foo’)”.

Now that jQuery and prototype can coexists peacefully, how does ThickBox work? Well… out of the box it doesn’t. ThickBox uses the “$” syntax, but expects to use jQuery’s implementation of it. So to get ThickBox to work, you need to replace all instances of “$” with “jQuery” in thickbox.js. Now ThickBox should be using jQuery exclusively, jQuery and prototype won’t conflict over “$”, and everything should work fine and dandy. Note: I’ve only tried this using ThickBox 2.1.1, jQuery 1.1.1, and prototype 1.5.0, but it should work on the latest and greatest versions.

This entry was posted on Friday, August 17th, 2007 at 10:39 am and is filed under javascript, jumpbox, rails . You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

28 Responses to “getting thickbox, jquery, and prototype to play together nicely”

Leave a Reply