Cannot enqueue jQuery correctly using Google CDN

Question

The problem:

I understand how to regularly enqueue jQuery UI in functions.php.

My problem is that I'm using a selectmenu widget that doesn't come with WordPress by default:

http://wiki.jqueryui.com/w/page/12138056/Selectmenu

...and it only works if I enqueue jQuery using:

    wp_enqueue_script( 
   'uicore', 
   'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.min.js', 
    array('jquery') 
);

This works without conflict with datepickers but as soon as I call a jQuery UI button, all the jQuery elements on my page breaks.

Live examples:

A test example of button, selectmenu and datepicker working together: http://www.dominornovus.com/jquery-test-environment/

The actual example where the call to button breaks all jQuery elements: http://www.dominornovus.com/killyliss-country-house/test/

The code:

    //wp_enqueue_script('jquery-ui-datepicker');
    //wp_enqueue_script('jquery-ui-button');
    //wp_enqueue_style( 'uicss', 'http://dominornovus.com/wp-content/themes/killylisscountryhouse/jquery/custom-theme/custom-killyliss.css' );
    //wp_enqueue_script( 'uisel', 'http://jquery-ui.googlecode.com/svn/branches/labs/selectmenu/ui.selectmenu.js' );
    //wp_enqueue_style( 'uicss2', 'http://jquery-ui.googlecode.com/svn/branches/labs/selectmenu/ui.selectmenu.css' );

add_action('wp_enqueue_scripts','enq_menu_scripts_and_styles');

function enq_menu_scripts_and_styles() {
    // UI Core, loads jQuery as a dependancy

    wp_enqueue_script( 
       'uicore', 
       'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.min.js', 
        array('jquery') 
    );

    // jQuery
    //wp_enqueue_script( 'jquery', '//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"' );

    // jQuery UI
    //wp_enqueue_script( 'jqueryui', '//ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js' );

    // UI Theme CSS
    //wp_enqueue_style( 'uicss', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css' );
    wp_enqueue_style( 'uicss', 'http://dominornovus.com/wp-content/themes/killylisscountryhouse/jquery/custom-theme/custom-killyliss.css' );

    // Datepicker JS
    //wp_enqueue_script('jquery-ui-datepicker');
    //wp_enqueue_script( 'uidate', 'http://jquery-ui.googlecode.com/svn/branches/1.7.3/ui/ui.datepicker.js' );

    // Button JS
    //wp_enqueue_script('jquery-ui-button');
    //wp_enqueue_script( 'uibutton', 'http://jquery-ui.googlecode.com/svn/branches/1.7.3/ui/ui.button.js' );

    // Selectmenu JS
    wp_enqueue_script( 'uisel', 'http://jquery-ui.googlecode.com/svn/branches/labs/selectmenu/ui.selectmenu.js' );

    // Selectmenu CSS
    wp_enqueue_style( 'uicss2', 'http://jquery-ui.googlecode.com/svn/branches/labs/selectmenu/ui.selectmenu.css' );

}

Any help would be greatly appreciated.

Answer 1

It's very likely that your test is broken because of conflicts. You are essentially loading two versions of all your UI scripts. That is because the Google CDN version of JQuery UI is not the core, but the entire script library (including datepicker, autocomplete, etc), as opposed to the WordPress scripts, which are broken into pieces which tend to be concatenated when inside the admin area.

This means that you don't have to enqueue all UI scripts separately, if you're including Google's version. They'll just work. Try that first.

If you find that something else (WP, a plug-in, an element from your theme) is enqueuing WP's default scripts and causing trouble, you can try to dequeue the ones which are causing conflicts (just look at the bottom of your test page: they're all there). Or you can try the official way to replace WP scripts with CDN ones, as stated in the Codex.

// Deregister first, then register again with new source, and enqueue
wp_deregister_script('jquery-ui-core');
wp_register_script('jquery-ui-core', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.min.js');
wp_enqueue_script('jquery-ui-core');

The problem here are dependencies. You might have to do this with other UI scripts in order to make it work as expected.

Last but not least, I hear WP 3.5 has the latest versions of UI included by default (1.8.23 as of today). While I can't say that you won't have other problems if you use the 3.5-alpha available today, you'll probably be safe from script enqueueing conflicts.