Search code examples
jqueryscriptaculous

scriptaculous and JQuery do not collaborate

I am using jQuery slider to browse images and Scriptaculous slider animation on the same page. They work perfectly if I put in two separate pages.

When I order the code in this way.

<script type="text/javascript" src="/scripts/prototype.js"></script>     
<script type="text/javascript" src="/scripts/scriptaculous.js?load=effects"></script>               
<script type="text/javascript" src="/scripts/lightbox.js"></script> 

<script type="text/javascript" src="/scripts/coda-slider-2.0/jquery-1.3.2.min.js"></script> 
<script type="text/javascript" src="/scripts/coda-slider-2.0/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="/scripts/coda-slider-2.0/jquery.coda-slider-2.0.js"></script>

<script type="text/javascript">
    jQuery(document).ready(function(){      
        jQuery('#coda-slider-1').codaSlider({
        dynamicArrows: false,
        dynamicTabs: false
    });
    });            
</script>

Scriptaculous slide is working and jQuery slide stops working. When I order this way.

<script type="text/javascript" src="/scripts/coda-slider-2.0/jquery-1.3.2.min.js"></script> 
<script type="text/javascript" src="/scripts/coda-slider-2.0/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="/scripts/coda-slider-2.0/jquery.coda-slider-2.0.js"></script>

<script type="text/javascript">
    jQuery(document).ready(function(){      
        jQuery('#coda-slider-1').codaSlider({
        dynamicArrows: false,
        dynamicTabs: false
    });
    });            
</script>

<script type="text/javascript" src="/scripts/prototype.js"></script>     
<script type="text/javascript" src="/scripts/scriptaculous.js?load=effects"></script>               
<script type="text/javascript" src="/scripts/lightbox.js"></script>

jQuery starts working and Scriptaculous slide stops working. Then I looked for some solution around and it is stated that using jQuery.noConflict(); and replacing selector $ with jQuery can solve the problem but it doesn't. I put these two things in the code and try this way.

script type="text/javascript" src="/scripts/prototype.js"></script>     
<script type="text/javascript" src="/scripts/scriptaculous.js?load=effects"></script>               
<script type="text/javascript" src="/scripts/lightbox.js"></script> 

<script type="text/javascript" src="/scripts/coda-slider-2.0/jquery-1.3.2.min.js"></script> 
<script type="text/javascript" src="/scripts/coda-slider-2.0/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="/scripts/coda-slider-2.0/jquery.coda-slider-2.0.js"></script>

<script type="text/javascript">
    jQuery.noConflict();
    jQuery(document).ready(function(){      
        jQuery('#coda-slider-1').codaSlider({
        dynamicArrows: false,
        dynamicTabs: false
    });
    });            
</script>

That only forces jQuery to work no matter what order it and it makes Scriptaculous stop working.

Any suggestion is appreciated here. Cheers.

Solution

  • I'm not so well versed with Scriptaculous, but just two things right off the bat:

    1. If you're planning to use jQuery with another library (then call .noConflict()), load jQuery first, then call .noConflict(), then load the other libraries. In this case, prototype and scriptaculous. Safer that way, if I'm not mistaken.

    2. Make sure that the jQuery coda slider plugin actually supports .noConflict(). I think this is what Derek above was trying to say --- once you've called .noConflict(), jQuery releases the $ variable back into the open (for scriptaculous to use, for example). If the coda slider uses the $ variable heavily (without adapting to .noConflict()), that could be a big problem.