Magento showing jQuery conflict with each other

Question

I am pretty newbie to Magento. I have used banner rotaor script to show banner. As I had to show banner in every page thats why I have implemented the slider in header.phtml file so that I can show the banner in every page. So in header.phtml my slider code is something like this

    <script language="javascript">
         jQuery.noConflict();
        jQuery(document).ready(function(){
          bannerRotator('#bannerRotator', 500, 5000, true);
        });
      </script>
<div id="bannerRotator">
  <?php echo $this->getLayout()->createBlock('cms/block')->setBlockId('homepageslider')->toHtml(); ?>
</div>

here the slider is working well but when I looked the console tab in firefox I got some errors.Here is the image for console tab error. To solve all the issues I googled and came to know that jQuery is conflicting. So to clear that I used jQuery.noConflict and also removed all of $ into jQuery. But still I am getting same problem. Any help and suggestions will be really appreciable. Thanks

Live site can be found here

Answer 1

You main problem is that you're including jquery before prototype (view page source)

 <script type="text/javascript" src="..../js/jquery/jquery.js"></script>
 <script type="text/javascript" src="..../js/prototype/prototype.js"></script>

You need change it to

 <script type="text/javascript" src=".../js/prototype/prototype.js"></script>
 <script type="text/javascript" src=".../js/jquery/jquery.js"></script>
 //best to add  jQuery noConflict right after

To fixed this open

/design/frontend/default/[theme]/layout/page.xml

or (if jquery not found in above)

/app/design/frontend/default/[theme]/template/page/html/head.phtml

Your page.xml should look like

<default translate="label" module="page">
    ......
        <block type="page/html_head" name="head" as="head">
            <action method="addJs"><script>prototype/prototype.js</script></action>
            <action method="addJs"><script>lib/ccard.js</script></action>
            <action method="addJs"><script>prototype/validation.js</script></action>
            <action method="addJs"><script>scriptaculous/builder.js</script></action>
            ......
            <action method="addJs"><script>mage/translate.js</script></action>
            <action method="addJs"><script>mage/cookies.js</script></action>


            <action method="addItem"><type>skin_js</type><name>js/jquery-1.7.2.min.js</name></action>
            <action method="addItem"><type>skin_js</type><name>js/jquery.noconflict.js</name></action>
            <action method="addItem"><type>skin_js</type><name>js/jqforms/jquery.jqtransform.js</name></action>
           <!- all other jquery plugin below -->
   .....

Create a file call jquery.noconflict.js and add

 var $j = jQuery.noConflict(); // you could also add this  to the end of jquery-1.7.2.min.js

In your custom jquery code, you CANNOT use $... anymore (use by prototypeJs only) you need to use either $j... or jQuery...

Then remove

  <script src="http://modulesoft.biz:/projects/magento/extream/skin/frontend/base/default/js/jquery-1.4.4.min.js"></script>

Answer 2

The best way to get around conflicts in my experience is as follows:

• Remove 1 version of jQuery - you have 2 installed. Usually the latest one should be compatible with all your plugins.
• Edit your jQuery file and make, for example: jquery-1.7.1-custom.js
  • add jQuery.noConflict(); at the end of the file.
• What you are doing is correct - do not use the $ sign, just use the jQuery prefix for everything.
• The most important in your case. Make sure your files are loaded in this order:
  • Prototype
  • jQuery (custom)
  • jQuery plugins

Answer 3

You have two issues.

1)

You are including jQuery twice. You have jquery.js (1.7.1) included, and also jquery-1.4.4.min.js included further down. This is causing the issues are are seeing.

Search the project for the string 'jquery-1.4.4.min.js' and you will probably find an exntry inside an XML config file, try commenting this out..

Possibly two modules are both adding jquery via the Magento XML config. Remove one of these entries inside the modules XML config files and the issues should disappear. I would recommend removing jquery-1.4.4.min.js as this is included after most of the other jquery plugins which will cause yet more issues.

2)

jQuery.noConflict() is called after jquery has been used. As suggested above the best way of getting arounf this is to open your jquery.js file, and add this to the very end of the file: ;jQuery.noConflict();

Answer 4

You could use this Magento Module: https://github.com/sotastudio/Mage.Ext.Jquery

It just reorganizes the inclusion of JavaScript stuff and sets jQuery directly to the first position. In Addition, you can easily fire jQuery stuff within this snippet:

(function($) {
  $(function() {
    //console.log($('body'));
  });
})(jQuery);

Answer 5

Include the jquery.noConflict in the app/design/frontend/default/[theme name]/template/page/html/head.phtml file.

You want to add this right after you include jquery, and right before the getCssJsHtml()

I went a step further in my implementation and called it to a $j var, but you can do that or just implement jquery.noConflict();

If you use a var $j, then all of your jQuery calls would be with that object.

I did this:

!-- adding jQuery -->
<script type="text/javascript"     src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
//<![CDATA[
     var $j = jQuery.noConflict();
//]]>
</script>
<!-- ************* -->

<?php echo $this->getCssJsHtml() ?>

in your header.phtml you will need to call your slider like this:

<script language="javascript">
$j(document).ready(function(){
          bannerRotator('#bannerRotator', 500, 5000, true);
        });
</script>

Answer 6

You have to add jQuery.noConflict(); to the end of your jquery.js script file and not outside of it as it has to be called before prototype.js script gets included.