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

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 2

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();