How Prototype.js and jQuery Can Coexist In Magento

Magento uses PrototypeJS heavily, why? we can say Personal Preference. As a matter of fact you will notice the following scripts loaded with default Magento.

1
2
3
4
5
6
7
8
9
10
11
12
../js/prototype/prototype.js
../js/prototype/validation.js  
../js/scriptaculous/builder.js
../js/scriptaculous/effects.js
../js/scriptaculous/dragdrop.js
../js/scriptaculous/controls.js
../js/scriptaculous/slider.js
../js/varien/js.js
../js/varien/form.js
../js/varien/menu.js
../js/mage/translate.js
../js/mage/cookies.js

Most of experiences PHP developers prefer jQuery because of numerous reasons. We don’t want to go into the Prototype.js v/s jQuery debate. Our goal is to use jQuery for additional requirements and let Magento use Protype as part of it’s core.

When you call a jQuery with $ you will notice a conflict because Prototype.js registers $ variable for itself whereas jQuery tries to register the variable causing conflict. One of my friend got so frustrated with this that he ended up converting entire Magento store from Prototype.js to jQuery which isn’t wise due to many reasons. So, if you have to use jQuery within a Magento store which rely heavily on Prototype.js just put your jQuery in compatibility mode.

The default call for jQuery function goes like this

1
2
3
$(document).ready(function(){
$("#showdiv").show();
});

The above function will not work within a Magento store due to conflict with Prototype.js. Instead use jQuery like this

1
2
3
4
var $j = jQuery.noConflict();
$j(document).ready(function(){
$j("#showdiv").show();
});

Since we are using jQuery in compatibility mode it’s wiser not to call $ variable instead make a call to $j which is reference of jQuery.noConflict();. Simple isn’t it? Keep in mind that call to jQuery should be after the call to Prototype.

Please leave us a comment and let us know, how you managed to use Prototype.js and jQuery both in an application.

  • Gilbert

    This is awesome, i was looking for a quick way to enable jQuery features without hurting the Magento default JS (Prototype.js).

    Thanks for sharing.

  • Pritam Singh

    10 Reasons why jQuery is far better than archaic Prototype.js

    jQuery library size is smaller that Prototype! – jQuery.js is 83K and Prototype.js is 159K (121K when compressed).jQuery has more plugins available than Prototype! –
    jQuery has hundreds of unofficial plug-ins in a directory at
    plugins.jquery.com while Prototype has only a small selection here:
    http://www.prototype-plugins.com/jQuery is better at animation than Prototype! –
    There is nothing like jQuery.animate function by which you can do any
    css animation (You have to add scriptaculous.js for some pre-built
    animation effects!)jQuery community is far larger than Prototype! – If
    you measure jQuery and Prototype on metrics like the number of people
    using it, the number of search queries run on Google, the number of
    books sold, etc, you’ll see jQuery is ahead by a wide margin.jQuery is easier to learn than Prototype! – There
    are more tutorials out there online and you don’t need to know
    JavaScript inside out to learn it! It is also a widely known fact that
    Prototype takes longer to learn than jQuery.jQuery has less conflicts than Prototype! – Prototype has class creation, Try.these and Position, Range.jQuery has sexier looking syntax than Prototype! – This ones a personal opinion of mine… a very subjective observation!You can achieve more with less code using jQuery in lots of common tasks (see code example below for proof!)jQuery loads faster in IE than Prototype!jQuery is updated more regularly than Prototype! – Simply better performance due to more updates and bug fixes from a dedicated team

  • http://www.fmeextensions.com/ Magento Modules

    i believe prototype will be eliminated in Magento 2