0

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.

1 Answer 1

4

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.

5
  • Solution 1 (Using Google CDN and enqueueing nothing else): Datepicker works but the jQuery UI button does not work. Solution 2 (Dequeue conflicting scripts using the function found in the Codex): Datepicker and button work but now the selectmenu script doesn’t work. Sep 5, 2012 at 7:45
  • Fix: I changed the function to target wp_head instead of wp_enqueue_scripts and now the datepicker, button and selectmenu work together. In fact, all three UI widgets well with my jQuery based navigation menu once activated. To continue best practice, I enqueued to script for my navigation menu even though at this stage it wasn’t causing conflicts. Working code can be viewed here: pastebin.com/bxZGzjKE. Sep 5, 2012 at 7:46
  • Solution 3 (UI included in WP 3.5): Didn’t need to research this solution but have contacted author of fnagel selectmenu to figure out why the script won’t work with the jQuery WordPress library. github.com/fnagel/jquery-ui/issues/266 Sep 5, 2012 at 7:47
  • Glad to see you got it working. Sometimes it's complicated to understand precisely what type of conflicts you're having. That's why it's better (easier?) to stick with scripts included in WP. Sep 5, 2012 at 11:15
  • After all that, it turns out I was using an outmoded CDN for the selectmenu UI widget. After speaking with the author of the jQuery selectmenu, I was advised that currently no CDN exists and that I had to upload the files to my website. It now works with the default jQuery that comes with WordPress (no longer a need to deregister jQuery or rely on CDNs). Long story short (and with reference to your last comment), I can now stick with the scripts included with WordPress. Here's the working code and instructions for anyone who might need it: pastebin.com/DCZzmwUv Sep 7, 2012 at 0:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.