To diagnose this kind of errors, open error console in your favorite browser.
Sidenote. Author's favorite browser at the moment of writing is Google Chrome, so some instructions are specific to that browser. However, other browsers typically has similar tools.
To open error console in Google Chrome, right click anywhere on your page and choose "Inspect Element". Inspector pane opens at the bottom of the page, select "Console" tab in it:
The line Uncaught TypeError: ... has no method 'options' is clear indicator of jQuery conflict. In case you see such error, follow this guide to resolve a problem.
Finding jQuery Instances
You need to identify <script> tags which include jQuery file. They are typically named like jquery.js, jquery.min.js, jquery-1.6.2.js and similar. Open such files by clicking a link in page source and read the beginning of the file. It is jquery file if it starts with lines like this:
* Copyright 2011, John Resig
* Dual licensed under the MIT or GPL Version 2 licenses.
To resolve a problem you need to leave only one jQuery file.
Mark down all the file names excluding Magento base directories. If you find http://www.yourdomain.com/js/jquery/jquery.js, mark down "jquery/jquery.js", if you find http://www.yourdomain.com/skin/frontend/design_package/design_theme/js/jquery.js, mark down "js/jquery.js". We will serach for these strings later on.
Magento Theme Inheritance
Before we start examining Magento files, the notion of Magento theme inheritance should be explained. Each Magento theme name consists of 2 parts separated by slash: package/theme. When Magento searches for a theme file, for example "layout/catalog.xml" it first file it finds in the following directories:
Finding Magento Files Making jQuery Appear More Than Once
There 2 types of files which can include jquery into a page: layout XML files and template PHTML files. First of all search for all XML files containing any of relative jquery file names you marked down previously in the following directories and their subdirectories:
Open each of these files, and comment <action> commands which add jquery files, from this:
In the same manner, search for all PHTML files containing any of relative jquery file names you marked down previously in the following directories and their subdirectories:
Typical suspect is page/html/head.phtml but these may be more such files.
Open each of these files, and comment <script> tags which add jquery files, from this:
Save all the files. you have modified, clear cache.
Adding the Only jQuery Instance
In previous steps, if done properly, we have already removed all jquery instances from all the pages. The final step adds one jquery instance to every page:
- Open layout/page.xml in your theme.
- Find the line <action method="addJs"><script>prototype/prototype.js</script></action>
- AFTER this line, add the following line: <action method="addJs"><script>jquery/jquery.min.js</script></action>
- Save the file.
Refresh Magento cache.