CODEWITHSUNDEEP
jquerymagento
Pankaj Upadhyay
Pankaj Upadhyay

Reputation: 13574

Magento jQuery conflict

In my head.phtml, I have following declaration for getting a menu work.

<script src="<?php echo $this->getJsUrl(); ?>lib/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="<?php echo $this->getJsUrl(); ?>jQuery_1205141001.js" type="text/javascript"></script>
<script src="<?php echo $this->getJsUrl(); ?>Common_1205141001.js" type="text/javascript"></script>
<script src="<?php echo $this->getJsUrl(); ?>lib/jquery.jcarousel.min.js" type="text/javascript"></script>

Now, I am able to get the menu work, but because of this the Add-to-cart button on the details page is broken. If I remove the above references, the Add-to-cart button is restored. I looked at various question regarding the conflict between prototype.js and jquery and tried following things

  1. First, I tried adding jQuery.noConflict(); at the end of jquery-1.4.2.min.js, but it didn't worked. It also broke the menu
  2. Second, I tried adding jQuery.noConflict(); at the start of my query files, jQuery_1205141001.js and Common_1205141001.js. That too didn't helped.

Please tell me how to get both the things working. You can visit this LINK for live test. Here you will see the menu working but the Add to cart is broken.

NOTE:- It has nothing to do with the Superfish.js and other errors shown in jquery debugger.

Upvotes: 0

Views: 16046

Answers (5)

Belphegor
Belphegor

Reputation: 71

I tried the 'no conflict' method but it didnt work for me.

In the end, I did NOT need it.

Here is how I solved the problem after 2 hours of tinkering:

Make sure that the conflicting javascript file that you are trying to introduce is the last javascript to be called in: /app/design/frontend/YOURTHEME/YOURCHILDTHEME/template/page/html/head.phtml.

In my case, the troublesome file I was trying to introduce was: 'jquery-1.4.2.min.js'

I have a hunch that this may have conflicted with the default script: 'jquery-1.7.1.min.js'

Upvotes: 0

user1982312
user1982312

Reputation: 19

This one works:

$.noConflict();
jQuery(document).ready(function($) {});

Upvotes: 0

AKnox
AKnox

Reputation: 2635

If you are serving the file add two line breaks to jquery then

jQuery.noConflict();

Upvotes: 1

4b0
4b0

Reputation: 22323

<script src="<?php echo $this->getJsUrl(); ?>lib/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="<?php echo $this->getJsUrl(); ?>jQuery_1205141001.js" type="text/javascript"></script>
<script src="<?php echo $this->getJsUrl(); ?>Common_1205141001.js" type="text/javascript"></script>
<script src="<?php echo $this->getJsUrl(); ?>lib/jquery.jcarousel.min.js" type="text/javascript"></script>
<script type="text/javascript">
  $.noConflict(); //Use no conflict here instead of js file
  // Code that uses other library's $ can follow here.
</script>

For details visit a link.
http://api.jquery.com/jQuery.noConflict/

Upvotes: 4

CCBlackburn
CCBlackburn

Reputation: 1704

I seem to remember having to call the different .js files/code in this order to get it to work correctly.

  1. jquery.js
  2. noconflict call
  3. prototype.js

Have you given this a go?

It seems to be the answer in a couple of other questions:

Weird Chrome prototype/jQuery conflict

magento using jquery with noconflict

Upvotes: 1

Related Questions