Using jQuery noConflict() with script.aculo.us

1 Views

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:

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

Post Views: 1

Related posts

Leave a Reply

4 comments

  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();