Question

What I’m doing:

I’m using a three jQuery UI widgets plus a separate jQuery based navigation menu.

You can see the three UI widgets working together here:

http://www.dominornovus.com/jquery-test-environment/

(link features datepicker, selectmenu and button jQuery UI widgets)

The problem:

When I copy my working code to another website, the call to the jQuery UI button randomly breaks all jQuery on my page (including the separate jQuery based navigation menu):

http://www.dominornovus.com/killyliss-country-house/test/

The only difference between the pages found at the two links I’ve provided is the jQuery based navigation menu.

Please note that even when I delete all code relating to the navigation menu, the call to the button UI widget still breaks jQuery on my page.

My question

Can anyone deduce from the two pages what difference exists and why one page fails on the button UI call but the other page doesn’t?

I can’t find any discernible difference between the two pages and yet they behave differently. One breaks; the other doesn’t.

Answer 1

After further research, this turned out to be a WordPress issue so I posted the issue to WordPress Answers instead.

Simply put, I was enqueueing jQuery twice.

Here’s my final working code (added to theme’s function.php file):

    //https://wordpress.stackexchange.com/questions/64062/cannot-enqueue-jquery-correctly-using-google-cdn
    //http://codex.wordpress.org/Function_Reference/wp_enqueue_script#Load_a_default_WordPress_script_from_a_non-default_location

    function my_scripts_method() {
        wp_deregister_script( 'jquery' );
        wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.8.12/jquery.min.js');
        wp_enqueue_script( 'jquery' );
        wp_enqueue_style( 'uicss', '(path_ to_script_location)/my-custom-style.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', 'my_scripts_method'); // selectmenu would not work targeting wp_enqueue_scripts
    add_action('wp_head', 'my_scripts_method'); //use wp_head instead

The WordPress Answers thread can be read here: https://wordpress.stackexchange.com/questions/64062/cannot-enqueue-jquery-correctly-using-google-cdn

After some time, I’ve figured out how to successfully apply the selectmenu widget to WordPress.

WordPress installations come complete with a bundle of jQuery scripts.

The fnagel selectmenu will not work the default bundle of jquery and jquery-ui scripts and instead has to be referenced externally using Google CDN.

I had to deregister the default local jQuery library for WordPress, enqueue the Google CDN and then enqueue the selectmenu script and CSS.