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.

回答1:

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

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.
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.

回答2:

You're not likely to get this working—Scriptaculous depends on Prototype to do it's thing.

Your best option is to find a jQuery-compatible replacement for the Scriptaculous effect that you're using.

回答3:

jquery.coda-slider-2.0.js depends on $, you'll need to update any references to $ in that file to be jQuery, and continue using noConflict()

Try this:

<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> 

<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>

With this file for jquery.coda-slider-2.0.js

If this doesn't work, you'll probably want to either scrap jQuery and find a similar plugin for prototype, or vice-versa. If you are only using prototype for the lightbox, jQuery offers a nice lightbox plugin as well.

回答4:

jQuery and Prototype both use the $ selector. noConflict() should fix this conflict but if it isn't you can find the $ signs in your document and replace them with document.getElementById

回答5:

This is just expanding on Richard Neil Ilagan's point 2 (with which I wholly agree). In order to work with jQuery in noConflict mode, all plugins should be of the general form:

jQuery(function() {
    (function($) {
        $.fn.codaSlider = function() {
            // Plugin's code goes here.     
            // Within this function, $ refers to jQuery.
        };
    })(jQuery);
});

The outer function gets executed on page load, and gets access to jQuery without using '$' (so is safe against Prototype). The inner Self-Executing Function is there merely to create a scope in which $ refers to jQuery. Inside the SEF, $ refers to jQuery, as is expected by naive plugins that don't support noConflict out-of-the-box. So the code for such a plugin can often be copy'n'pasted into the body of the SEF above, and it will Just Work (tm).

This is superior to changing all instance of '$' to 'jQuery', because it will not change '$' characters in regexes, etc, and leaves the original code unchanged apart from indentation, so easier to merge in future changes.

HTH

来源：https://stackoverflow.com/questions/5813744/scriptaculous-and-jquery-do-not-collaborate

标签

jquery

scriptaculous