Magento + jquery slider $ is not defined

I'm integrating a content slider into magento theme, but having some issue with the js. 开发者_高级运维I get the error "$ is not defined", then I found a solution from a website stating that I should add this line "jQuery.noConflict();" into my jquery file.

Then in the home.phtml, :-

<script type="text/javascript">
var $s = jQuery.noConflict();
    $s(document).ready(function(){
        $("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
    });
</script>

In my page.xml, this is how I include the js

<action method="addJs"><script>jquery/jquery.js</script></action>
<action method="addJs"><script>jquery/jquery-ui.min.js</script></action>

<action method="addJs"><script>prototype/prototype.js</script></action> 

After I done the above changes, I get the error "jQuery is not defined"

Appreciate any advice. Thanks in advance!

EDITED : This problem is solved by calling the js from the CMS page->content :-

<script type="text/javascript">// <![CDATA[
   var $j = jQuery.noConflict();  jQuery(document).ready(function($) { jQuery("#featured  ul").tabs({fx:{opacity:"toggle"}}).tabs("rotate", 5000, true); }); //  &gt;
// ]]></script>

At the CMS page -> Design , include the js files needed :-

<reference name="head">
  <action method="addItem"><type>skin_css</type><name>css/slider.css</name></action>
  <action method="addItem"><type>skin_js</type><name>js/jquery.min.js</name></action>
<action method="addItem"><type>skin_js</type><name>js/jquery-ui.min.js</name></action>
</reference>

However this method is only useful if only a particular page is using the js and not every page. :)

Actually, there is a better alternative to what Mathew is suggesting.

Use a closure to limit the scope of $, in your example you would need to change the following code:

$(document).ready(function(){
    $("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
});

To something such as:

jQuery.noConflict();
(function($) {
    $(document).ready(function(){
        $("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
    });
})(jQuery);

Also, you need to put those addJs calls into reference 'head' to put them in the right place in the HTML source. Right now, they are probably in the root block instead.

Insert the following code at the end of /template/page/html/head.phtml

<script type="text/javascript">
    jQuery.noConflict();
</script>

Use jQuery instead of $ in your script files. Your code look like

<script type="text/javascript">    
 jQuery(document).ready(function(){
          jQuery("#featured > ul").tabs({fx:{opacity:"toggle"}}).tabs("rotate", 5000, 
 true);
      }); 
 </script>

jquery 1.5.2v works well with magento.

Hope this will help you.

You have to change all instances of the $ in your script to use jQuery(). For more information see the documents:

http://api.jquery.com/jQuery.noConflict/

Alternatively you can use the mXperts plugin for the job:

http://www.magentocommerce.com/magento-connect/mxperts/extension/1619/mxperts--jquery-base

You can use var $j = jQuery.noConflict();. This code goes in your script, and use $j in place of $.