Using jQuery noConflict() with script.aculo.us

问题:

I have a site using a "widget" (from http://healcode.com) that includes the script.aculo.us JavaScript library. The problem is that the site I'm building is on WordPress, so there's the classic jQuery vs script.aculo.us conflict.

I know that I need to run jQuery in .noConflict() mode, but I must be getting the syntax wrong. When I assign the $ to jQuery .noConflict as follows, it still shuts down the script.aculo.us functions:

var $ = jQuery.noConflict();

$(document).ready(function () {

    //#nav-main dropdown effects

    $('#nav-main ul li').hoverIntent(function () {
        $(this).find('.dropdown').stop(true,true).slideDown('900'); },
            function(){
                $(this).find('.dropdown').stop(true,true).slideUp('500');
        });
}); // end document.ready

I know that I am assigning the $ to jQuery in .noConflict() mode, and I assume that script.aculo.us (which loads via a widget in the main body, therefore AFTER jQuery) is trying to re-assign the $ back to script.aculo.us.

How can I assign the $ to jQuery in a way that the later-loaded script.aculo.us library won't conflict? I've already tried the following without any success (the following code causes script.aculo.us to work, but jQuery to fail):

jQuery(document).ready(function () {

    //#nav-main dropdown effects

    jQuery('#nav-main ul li').hoverIntent(function () {
        jQuery(this).find('.dropdown').stop(true,true).slideDown('900'); },
            function(){
                jQuery(this).find('.dropdown').stop(true,true).slideUp('500');
        });
}); // end document.ready

EDIT

The debug console output for the above code is:

Uncaught TypeError: Object #<HTMLDocument> has no method 'ready' (anonymous function) so the document.ready fails because it's assigned to jQuery, which is somehow not loading properly...

EDIT 2

Both of the 2 (at the time of this update) answers posted below do nothing to address the issue I'm struggling with. Perhaps they are technically correct, but they do not address my issue.

回答1:

This worked for me so that I can have jQuery and script.aculo.us/Prototype working well together. Credit goes to codeimpossible for this lifesaver!

Instead of:

jQuery(document).ready(function () {

    // Code to run on DOM ready

}); // End document.ready

Try this:

( function($) {

    // Code to run on DOM ready

} )( jQuery ); // End document.ready

回答2:

I found the solution VERY surprising!

First of all, using the $j = jQuery.noConflict(); mode did not work.

Second, calling jQuery.noConflict(); at the head did not work.

The method that did work was this one: http://codeimpossible.com/2010/01/13/solving-document-ready-is-not-a-function-and-other-problems/

Oddly, the Coda Slider 2.0 plugin does not automatically do noConflict so it turned out that IN ADDITION to the problems listed above, I needed to wrap that plugin in .noConflict(); as well. Shout out the the author of the blog post, not sure why other noConflict(); calling methods didn't work, but I'm glad I found the post.

回答3:

Assigning jQuery right back to $ doesn't do anything.

Either assign jQuery to a different variable:

var j$ = jQuery.noConflict();

Or don't assign it to anything:

jQuery.noConflict();

回答4:

Try this:

<script src="url to jquery"></script>
<script type="javascript">jQuery.noConflict();</script>
<script src="url to scriptaculous"></script>