Extension jQuery Base
This is an old revision of the document!
Extension jQuery Base |
NEW: Extension jQuery Base is available in Magento Connect http://www.magentocommerce.com/extension/1619/mxperts--jquery-base
Intro |
jQuery can be easily used with other libraries so it should work out of the box with Magento. But in fact, it’s not... cause of an old version of scriptaculous not written with other libraries in mind.
How To |
Scriptaculous |
- Get a new version of the file effects.js of the scriptaculous library. Version 1.8.1 is fine.
- Rename the file effects.js to effects-1.8.1.js
- Copy it to your scriptaculous directory: js/scriptaculous/
- In page.xml in the “frontend” and main.xml in “adminhtml”, change that line
<action method="addJs"><script>scriptaculous/effects.js</script></action>
to
<action method="addJs"><script>scriptaculous/effects-1.8.1.js</script></action>
jQuery |
- Add this line to the bottom of jquery-1.2.6.min.js
jQuery.noConflict();
- Rename the file to jquery-1.2.6.noConflict.min.js
- Copy the file to the directory js/jquery/
- In page.xml, add it to the list of js files:
<action method="addJs"><script>jquery/jquery-1.2.6.noConflict.min.js</script></action>
Use it |
- 1st way (notice the function($))
jQuery(document).ready(function($){
// Use jQuery with $(...)
$('div').show();
});
// Use Prototype with $(...)
$('id').hide();
- 2d way
jQuery(document).ready(function(){
// Use Prototype with $(...)
$('id').hide();
// Use jQuery with jQuery(...)
jQuery('div').show();
});
Happy jQuery, jQuery plugins & jQuery UI ;)

