Magento demonstrates jQuery conflict with each other

Question

I am new to Magento . I used the rotaor script banner to display the banner. Since I had to show a banner on every page, so I applied a slider in the header.phtml file so that I could show a banner on every page. So in header.phtml, my slider code looks 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> 

the slider works fine here, but when I looked at the console tab in firefox, I got some errors. Here is the image for the console tab error. To solve all the problems that I encountered, I found out that jQuery contradicts each other. Therefore, to clear, I used jQuery.noConflict , and also deleted all $ in jQuery . But still I have the same problem. Any help and suggestions will be really noticeable. Thanks

Live website can be found here.

Answer 1

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

You want to add this right after jquery is turned on and right before getCssJsHtml ()

I took another step in my implementation and named it the variable $ j var, but you can do it or just implement jquery.noConflict ();

If you use var $ j, then all your jQuery calls will be with this object.

I have done 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 as follows:

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

Answer 2

You have two problems.

one)

You enable jQuery twice . You have jquery.js (1.7.1) enabled, and jquery-1.4.4.min.js is included next. This causes problems that are visible.

Find the project for the jquery-1.4.4.min.js line and you are likely to find exntry inside the XML configuration file, try commenting on this.

Perhaps two modules add jquery through the Magento XML configuration. Delete one of these entries inside the XML module configuration files and the problems should go away. I would recommend removing jquery-1.4.4.min.js as it is included after most other jquery plugins, which will cause even more problems.

2)

jQuery.noConflict () is called after using jquery. As suggested above, the best way to get arounf is to open the jquery.js file and add it to the very end of the file:; JQuery.noConflict ();

Answer 3

You need to add jQuery.noConflict(); at the end of your jquery.js script file, not outside it, because it must be called before the prototype.js script file is added.

Answer 4

You can use this Magento module: https://github.com/sotastudio/Mage.Ext.Jquery

It simply reorganizes the inclusion of JavaScript content and sets jQuery directly to the first position. Alternatively, you can easily run jQuery in this snippet:

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

Answer 5

The best way to get around conflicts in my experience:

• Uninstall version 1 of jQuery - you have installed 2. Usually the last one should be compatible with all your plugins.
• Edit the jQuery file and create, for example: jquery-1.7.1-custom.js
  • add jQuery.noConflict(); to the end of the file.
• What you do is right - don't use the $ sign, just use the jQuery Prefix for everything.
• The most important thing in your case. Make sure your files are uploaded in the following order:
  • Prototype
  • jQuery (custom)
  • JQuery plugins

Answer 6

The main problem is that you include jquery before the 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 to 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 fix this open

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

or (if jquery is not found in the above)

/ app / design / interface / 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 jquery.noconflict.js file call 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 only the prototype), 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>