Wednesday, November 17, 2010

Plone, JQuery and Prototype: Easier Done Than Said

It's hard to believe, but jQuery hasn't always existed. So some of us used other libraries, like Prototype[.js]. We even built entire systems on them. And then upgrade day came...

I sat back with my largest bottle of beer and got ready for what was sure to be a javascript apocalypse. How could I merge 4 years of Prototype based javascript with Plones new JQuery libs? Surely it would be painful.

And yet it wasn't. It will take me longer to write this blog post. But just in case there is some other straggling soul like myself who just can't get enough Event.observe(), fear not! Follow these simple steps:

  1. Create a new js file and add one line: jQuery.noConflict();
  2. Then register that js file with your site. Prototype must go first or it will whine (remember not to compress or cook!). The noConflict js file must be listed before using any custom scripts. I recommend loading it right after jQuery.js. See below for a sample.
  3. Reinstall. 

Much can be said about jQuery playing nice and especially to the Plone javascript gurus who were kind enough to work within a namespace. Thank you. I owe you a beer.