CODEWITHSUNDEEP
javascriptphpjquerymagentotabs
KarSho
KarSho

Reputation: 5746

Jquery not working in Magento

I'm using Tab option in my C:\wamp\www\magento\app\design\frontend\base\default\template\catalog\product\view.phtml, using with following Jquery,

<script  type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
  $(document).ready(function() {
    $('ul.tabs').each(function(){
      var active, content, links = $(this).find('a');
      active = links.first().addClass('active');
      content = $(active.attr('href'));
      links.not(':first').each(function () {
        $($(this).attr('href')).hide();
      });
      $(this).find('a').click(function(e){
        active.removeClass('active');
        content.hide();
        active = $(this);
        content = $($(this).attr('href'));
        active.addClass('active');
        content.show();
        return false;
      });
    });
  });
</script>

If I give this, Add to Cart is not working. Giving following error in Console from prototype.js,

Uncaught TypeError: Object [object Object] has no method 'attachEvent'

Uncaught TypeError: Object [object Object] has no method 'dispatchEvent'

If I remove, <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> then Add to Cart working fine. But 'Tab option' not working.

How I can Implement Both?

Upvotes: 1

Views: 11840

Answers (4)

Jagi Yadav
Jagi Yadav

Reputation: 111

Add the jquery.min.js file in Head.phtml , also add jQuery.noConflict() jut below the jquery.min.js inseated of calling js on individual page.

then, there will not be any js conflicting issue :)

Upvotes: 0

Nikunj Vadariya
Nikunj Vadariya

Reputation: 447

please try this.......

    <script  type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script>
      jQuery.noConflict();
     var $j = jQuery.noConflict();
      $j(document).ready(function() {
        $j('ul.tabs').each(function(){
          var active, content, links = $j(this).find('a');
          active = links.first().addClass('active');
          content = $j(active.attr('href'));
          links.not(':first').each(function () {
        $j($j(this).attr('href')).hide();
          });
          $j(this).find('a').click(function(e){
        active.removeClass('active');
        content.hide();
        active = $j(this);
        content = $j($j(this).attr('href'));
        active.addClass('active');
        content.show();
        return false;
          });
        });
      });
    </script>

Upvotes: 1

Zahirabbas
Zahirabbas

Reputation: 1119

 <script  type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script>jQuery.noConflict()</script>
        <script>
          jQuery(document).ready(function($) {
            $('ul.tabs').each(function(){
              var active, content, links = $(this).find('a');
              active = links.first().addClass('active');
              content = $(active.attr('href'));
              links.not(':first').each(function () {
                $($(this).attr('href')).hide();
              });
              $(this).find('a').click(function(e){
                active.removeClass('active');
                content.hide();
                active = $(this);
                content = $($(this).attr('href'));
                active.addClass('active');
                content.show();
                return false;
              });
            });
          });
        </script>

Upvotes: 10

Rajiv Ranjan
Rajiv Ranjan

Reputation: 1869

You are adding jQuery library into view.phtml and other prototype library are already loaded on page. That's why it raising error. Add this jQuery library from layout catalog.xml.

Add External JS Method:

<action method="setText">
<text><![CDATA[<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script><script type="text/javascript">jQuery.noConflict();</script>]]></text>
</action>

OR

Download library and keep into js/ directory and add it from there.

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

Hope will help!

Upvotes: 0

Related Questions