How to fix Jquery Conflicts in Magento


After digging through some more forum posts, I found the answer.

Change the line:
Code:
$(function() {

to:

Code:
jQuery.noConflict();
jQuery(function($) {


noConflict removes the alias from jQuery to $. You could replace all of your $'s with jQuery if you really wanted. Or, just wrap your code with jQuery(function($) { regular jQuery code });

Similarly, the 

Code:
$(document).ready(function(){ regular jQuery code });

can be replaced with 

Code:
jQuery(document).ready(function($) { regular jQuery code });
Example like:



<script src="<?php echo $this->baseurl ?>/templates/had2b/js/jquery-1.7.1.js"></script>

<script type="text/javascript">
$(function(){
    $('h1.new-register').click(function(){
        $('div.register').slideToggle();
    });
});
</script>


                      change to

<script src="<?php echo $this->baseurl ?>/templates/had2b/js/jquery-1.7.1.js"></script>

<script type="text/javascript">jQuery.noConflict();</script>


<script type="text/javascript">

jQuery(function($){
    $('h1.new-register').click(function(){
        $('div.register').slideToggle();
    });
});
</script>

0 comments:

Post a Comment