Magento News

 

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. :)

Magento + jquery slider $ is not defined

Possibly Related Posts:


 

Leave a Reply