magento using jquery with noconflict

Question

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>

Solution 1

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

Solution 2

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.

Comments

[Elzo Valugi]

do you get any errors in the console?

[Leon van der Veen]

good question, this is what i get: Uncaught TypeError: Object #<HTMLDivElement> has no method 'attr'

[Elzo Valugi]

this is not a solution, the plugins should work in noConflict mode

[user1071188]

@Leon -> Try to replace all the occurences of $ with jQuery