How To Get jQuery and Prototype to Play Nicely Together
There’s a lot of misinformation out there about using the jQuery and Prototype JavaScript libraries together on the same page. Here’s the quick how-to:
- The jQuery library needs to be loaded AFTER the Prototype library, and BEFORE any Prototype functions are called.
- Immediately after loading the jQuery library, add the following to your code:
<script type=”text/javascript”>
jQuery.noConflict();
var $j = jQuery;
</script> - Any time you want to call jQuery functions, you can do so with the new shortcut $j, or in long-form, jQuery. The following code is equivalent after defining the $j variable as outlined above:
$j(“#some_div”).show();
jQuery(“#some_div”).show();
As an aside, remember that if you’re switching from Prototype to jQuery, any time you want to reference a div you need to add the ‘#’ symbol in front of the name of the div. So this Prototype code:
Would become:
There you go, now you can get Prototype’s superior AJAX functions, and jQuery’s awesome effects, without having to deal with Scriptaculous.