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.

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

  • jason Says:
    September 27th, 2007 at 11:45 am

    Love you lots!

    Scriptaculous/Prototype and Thickbox/jQuery now play nicely.

  • Ben Says:
    September 27th, 2007 at 5:01 pm

    Nice! Glad I could help =)

  • legalizenet Says:
    November 15th, 2007 at 5:14 pm

    Excellent..Great Help.

  • kyron Says:
    December 16th, 2007 at 9:11 am

    Thank you ! You are a life saver ;)

  • Wai-lun Hong Says:
    January 11th, 2008 at 4:02 am

    Great help!!
    I have been googling for whole week for this answer!!

  • Jared Says:
    March 19th, 2008 at 10:52 am

    Thank you very much. I found this fix on the net easily. Also, I found it easy to implement. I am two months out on a bad project and I need to finish today or die. I cannot imagine how long this would have delayed me if you did not put up this article.

  • Ben Says:
    March 19th, 2008 at 10:54 am

    No problemo Jared! Good luck on getting your project out the door.

  • Will Says:
    May 11th, 2008 at 3:45 am

    Thanks so much. You saved me a ton of troubleshooting time. Great post.

  • Nathan Says:
    May 11th, 2008 at 7:08 pm

    Thanks for the advise, but I still can’t get it to work. I’m getting a “undefined is not a function” error from the thickbox-compressed.js file.

    I’m calling the thickbox event via an onload function in my body tag which calls:

    function init()
    {
    tb_show(’Update’, ‘updates.html?height=550&width=600′, null);
    }

    I’m calling it from there because I want the thickbox to popup on page load without having to click on any links.

  • john wry Says:
    May 15th, 2008 at 3:03 am

    Great! Now I can have thickbox AND scriptaculous working together. Thanks!

  • kapono Says:
    June 6th, 2008 at 7:39 am

    thanks a lot this helped me huge. Im so glad there is a community out there that will support each other.

  • Graham Ramsay Says:
    July 14th, 2008 at 4:40 am

    So simple when you read about it, thanks for posting :)

  • Sean Says:
    September 7th, 2008 at 2:24 am

    I already gave up since rewriting everything to use jQuery wasn’t really an option. And then I found this site! Thanks for the solution!

  • Fred Says:
    September 19th, 2008 at 7:11 am

    thanks. saved my hide.

  • indiehead Says:
    October 15th, 2008 at 3:21 am

    awesome stuff,

    one thing though, after changing all your $ calls to jQuery in the thickbox.js file and putting in jQuery.noConflict(); for it to not conflict; you also need to do this,

    tb_init(’a.thickbox, area.thickbox, input.thickbox’);

    to make thickbox latch onto anything with a class of ‘thickbox’,

    or with google ajax api….

    google.load(”jquery”, “1.2.6″);

    jQuery.noConflict(); //now make jQuery not conflict with prototype
    tb_init(’a.thickbox, area.thickbox, input.thickbox’);

  • ronchiks Says:
    December 4th, 2008 at 1:06 am

    Thanks for your tip. It helped me a lot. Your blog was first in google when i searched for this problem. Great work!

  • Manish Dubey Says:
    December 19th, 2008 at 3:07 am

    You really saved me some days of work!!!

    Thanks a lot.

Leave a Reply