CODEWITHSUNDEEP
jquerymagentoprototypejsconflict
Leon van der Veen
Leon van der Veen

Reputation: 1672

magento using jquery with noconflict

I'm using 2 jquery scripts for my Magento store. One of those scripts, a slider works perfectly and the other one doesnt work.

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

function mycarousel_initCallback(carousel)
{
    // Disable autoscrolling if the user clicks the prev or next button.
    carousel.buttonNext.bind('click', function() {
        carousel.startAuto(0);
    });

    carousel.buttonPrev.bind('click', function() {
        carousel.startAuto(0);
    });

    // Pause autoscrolling if the user moves with the cursor over the clip.
    carousel.clip.hover(function() {
        carousel.stopAuto();
    }, function() {
        carousel.startAuto();
    });
};

jQuery(document).ready(function() {
    jQuery('#mycarousel').jcarousel({
        auto: 0,
        wrap: 'circular',
        animation: 600,
        scroll: 6,
        initCallback: mycarousel_initCallback
    });

    $('.block_cart_header').hover(function(){
        $('.cart_add_items').fadeIn(700);
    },
    function(){
        $('.cart_add_items').fadeOut(700);
    });


});

jQuery(document).ready(function() {
    jQuery('.dropdown').selectbox();
}); });</script>

When I remove jQuery.noconflict(); both of the scripts work but the prototype script doesnt work.

This is the script that doesnt work:

jQuery(document).ready(function() {
jQuery('.dropdown').selectbox();}); });</script>

Upvotes: 2

Views: 16596

Answers (4)

Bikram Shrestha
Bikram Shrestha

Reputation: 2070

gowri solution worked for me , if the problem exist again then you need be confirm all the js file that have been used you may missing to check the js files and changed them as stated by "gowri" i.e : 

replace all $( into jQuery( and $. into jQuery.

Upvotes: 0

Gowri
Gowri

Reputation: 16835

You need to replace all $( into jQuery( and $. into jQuery. in jQuery related functions and plugins.

for example in your code replace

jQuery('.block_cart_header').hover(function(){
        jQuery('.cart_add_items').fadeIn(700);
    },
    function(){
        jQuery('.cart_add_items').fadeOut(700);
    });

Extra information

You may change the order of library file initiating. In page.xml change order as below

  1. jquery.js
  2. noconflict.js
  3. prototype.js This will avoid the error in IE8.

Hope this helps

Upvotes: 7

Elzo Valugi
Elzo Valugi

Reputation: 27866

I would guess that the plugin that does not work is the problem. Leave the noConflict on, it is really needed for compatibility between the prototype and jQuery. Check if you are passing a correctly formatted HTML object to the plugin. Probably it expects an object with some specific attributes and those are not present.

Upvotes: 0

user1071188
user1071188

Reputation: 73

The selectbox plugin is probably using the $ for it's JQuery calls. Change all the $ in the selectbox plugin to jQuery and it should work.

If not, please place a link to the used selectbox plugin.

Upvotes: 2

Related Questions