Search This Blog

May 31, 2011

Magento: Solve jQuery Conflict

In default, Magento use Prototype framework for all processes that needs to be done using javascript. But most cases, developers use jQuery platform since it is easy to implement and understand. Thus, both of these framework use “$” in a function or in a variable name. These common feature result error or conflict when you try to use both in one single web site.

According to jQuery:

Many JavaScript libraries use $ as a function or variable name, just as jQuery does. In jQuery’s case, $ is just an alias for jQuery, so all functionality is available without using $. If we need to use another JavaScript library alongside jQuery, we can return control of $ back to the other library with a call to $.noConflict():

In order to solve the issue, you need include the following code in your head.html file. Here are the step by step guides in adding jQuery to Magento.

1. Download the latest jQuery library.
2. Put the jquery library in your skin directory. skin/frontend/default/your_theme/js/
3. Then, add the jquery using XML in your page.xml file. This is located in app/design/frontend/default/your_theme/layout/page.xml
4. Open your page.xml in an editor and look for “head” xml child element. Then add the following code.
5. IMPORTANT: To remove the conflict in other framework, add the following code in your head.phtml file

<script type="text/javascript" >
</script >

6. Done! You now solved issue between jQuery and other javascript library.