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:

  1. The jQuery library needs to be loaded AFTER the Prototype library, and BEFORE any Prototype functions are called.
  2. Immediately after loading the jQuery library, add the following to your code:
    <script type=”text/javascript”>
      jQuery.noConflict();
      var $j = jQuery;
    </script>
  3. 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:

$(“some_div”).show();

Would become:

$j(“#some_div”).show();

There you go, now you can get Prototype’s superior AJAX functions, and jQuery’s awesome effects, without having to deal with Scriptaculous.

Posted: January 17, 2009

Comments

No comments yet.

Sorry, the comment form is closed at this time.