0

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>

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.. :)

  • no this isn't working for me, I am using 2011 theme, and copied the above function to functions.php file of 2011 theme, now in firebug the css is also not getting loaded Whats wrong? – Niraj Chauhan Jul 11 '11 at 9:00
  • Check the source, are the scripts being output correctly into the page? Do you have other plugins active that use jQuery or jQuery UI? – t31os Jul 11 '11 at 9:52
  • just the style sheets are not getting called, rest the jqueries I am able to see the source code – Niraj Chauhan Jul 11 '11 at 10:19
  • I also included the style sheets in header, now the style sheets are also loaded in source code, but then too, the ui is not displayed – Niraj Chauhan Jul 11 '11 at 10:24
  • I found the plugin which is having conflict with the ui, but when I deactivate, the select box is not functioning fine, I cant explain abt its behaviour, you check on my site, in widget area webstutorial.com – Niraj Chauhan Jul 11 '11 at 10:42
0

Try using jQuery instead of JQuery

  • I tried but no change, Check my question for the edited part – Niraj Chauhan Jul 10 '11 at 4:53

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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