Jquery UI not working

Question

I am trying to integrate the Jquery UI select menu ("dropdown" Style), in my wordpress site.

But I am not able to do it, in widget area I created a select box and gave it respective ID of that css and jquery, but its not getting loaded with jquery.

Here is my code, which I am using it to achieve:-

The head part:-

<link rel="Stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-darkness/jquery-ui.css" type="text/css" />
    <link rel="Stylesheet" href="<?php echo get_template_directory_uri(); ?>/ui.selectmenu.css" type="text/css" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
    <script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/ui.selectmenu.js"></script>
    <style type="text/css">
        /*demo styles*/
        select,.ui-select-menu { float: left; margin-right: 10px; font-size: 62.5%;}
        select, .ui-selectmenu { width: 200px; font-size: 62.5%; margin:10px;}
        #cat{font-size: 62.5%;}

    </style>
    <script type="text/javascript">
        JQuery(function(){
            JQuery('select#cat').selectmenu({style:'dropdown'}); 
        });
    </script>
    <script type="text/javascript" src="http://ui.jquery.com/applications/themeroller/themeswitchertool/"></script>

The select menu appears with normal css, but the jquery is not working,

I am bad in Jquery, so can any one help, I am using 2011 Theme, and you can check the selet menu on my site http://webstutorial.com/

Edited:

<script type="text/javascript"> jQuery.noConflict(); jQuery(function(){ jQuery('select#cat').selectmenu({style:'dropdown'});
}); </script>

Answer 1

This works for me locally in testing..

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

    // UI Theme CSS
    wp_enqueue_style( 'uicss', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-darkness/jquery-ui.css' );

    // 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' );

}

add_action('wp_head','select_menu_test_code');

// Simple test code 
function select_menu_test_code() {
    // Simple no-conflict function
    ?>
    <script type="text/javascript">
    jQuery(function($){
        // You can use $ here
        $('select#cat').selectmenu();
    });
    </script>
    <?php
}

It wouldn't work for me when trying to use ui-core from WordPress, jQuery seems to be ok though. I used the same version of UI with the test code so it's strange that the one included in WordPress didn't work for me(i do have a plugin active that uses ui core, but disabling didn't seem to help at all).

See if my above code works for you, and tweak as necessary if it does.. :)

Answer 2

Try using jQuery instead of JQuery