Using jQuery with Magento Including Protype, Scriptaculous etc...

How to use jQuery with Magento?

Download jQuery from jQuery site

Add this line to the bottom of jQuery.js

CODE:

1-jQuery.noConflict();

Copy the file to the js/jquery folder|directory

In page.xml, add it to the list of js files as:

CODE:

1-<action method=“addJs“><script>jquery/jquery-1.2.6.noConflict.min.js</script></action>

or,

CODE:

1-<action method=“addItem“><type>js</type><name>jquery.js</name><params/></action>

How to use jQuery with magento now?

The below procedure is one way.

CODE:

1-jQuery(document).ready(function($){
2-// Use jQuery with $(...)
3-$('div').show();
4-});
5-// Use Prototype with $(...)
6-$('id').hide();

note: $ sign inside function($).

And another procedure is,

CODE:

1-jQuery(document).ready(function(){
2-// Use Prototype with $(...)
3-$('id').hide();
4-// Use jQuery with jQuery(...)
5-jQuery('div').show();
6-});

There are few more procedures available at jQuery site. But this much information is good to go with using jQuery with magento which uses prototype, scriptaculous etc...

COMMENTS: ( Approved Comments | Pending Comments )

Hi Bashyal, thanks for this post. does this work with the lastest version of magento 1.4? or will it work if the version of jquery is something other than version 1.2.6? ie. version 1.4.2 (latest)

04/06/10 04:13:49|King Rosales

So far i know it works with all versions.

04/06/10 04:15:50|Damodar Bashyal

 

Name*:
Email
(not published)*:

 

URL*:
Comment*:
Enter Total*:
How much is 7 + 2? Write on the above field.

Javascript must be enabled to post comments!