Jun 1, 2013

jQuery Prototype conflict, resolve it using noconflict

It’s difficult to use different javascript libraries in the same page. Because they tend to create conflicts with each other’s code, and often break javascript. One such case is using jQuery and PrototypeJS libraries in the same webpage. Both prototypejs and jquery use $ as their function or variable name which causes issues, as both the libraries will get triggered with that alias.

jQuery provides a method which solves this issue, so that you can use any javascript library with jQuery on the same page. This function is called noConflict(), and it simply uses different symbol/charater(s) you provide rather than dollar ($).

Below code will help you to understand this and you can use it to resolve conflicts between different javascript libraries used when using jQuery on the same page.

<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
    var $j = jQuery.noConflict();

After using the above code, you can use jQuery as $j and PrototypeJS as $.

Leave a comment


Welcome to my Blog

Kalpesh MehtaHelping Magento developers in their day-to-day development problems since 2011. Most of the problems and solutions here are my own experiences while working on different projects. Enjoy the blog and don't forget to throw comments and likes/+1's/tweets on posts you like. Thanks for visiting!




Magento top 50 contributors

Magento top 50 contributors