3

I'm trying to add a styling to the select form elements in my Drupal form using jQuery UI. I'm using Drupal 7 so the usual way to add jQuery UI would be something like this:

 drupal_add_library('system', 'ui.accordion');
 drupal_add_js('jQuery(document).ready(function(){jQuery("#accordion").accordion();});', 'inline');

However, when I try to add an effect that isn't bundled with Drupal 7 core, like this one, that approach doesn't work. Has anyone come across this problem before, and if so, is there a "standard" Drupal way of solving this?

2 Answers 2

4

I think the 'Drupal' way would be to implement hook_library() to add the new element to the system:

function MYMODULE_library() {
  $libraries['ui.selectmenu'] = array(
    'title' => 'jQuery UI: Selectmenu', 
    'website' => 'http://filamentgroup.com/lab/jquery_ui_selectmenu_an_aria_accessible_plugin_for_styling_a_html_select/', 
    'version' => '1.8.7', 
    'js' => array(
      drupal_get_path('module', 'MYMODULE') . '/jquery.ui.selectmenu.min.js' => array(),
    ), 
    'dependencies' => array(
      array('system', 'ui.widget')
    ),
  );

  return $libraries;
}

And then add it to your pages using drupal_add_library():

drupal_add_library('MYMODULE', 'ui.selectmenu');

Doing it this way ensures that all the necessary core UI files are included in the page automatically, and allows you to add the widget with a single line of code any time you want to.

3
  • Thanks for your reply Clive. I did that - but also added the css file in hook_library as 'css' => array( drupal_get_path('module', 'planb') . '/css/jquery.ui.selectmenu.css' => array(), ),. I then called the line: $('select').selectmenu(); from one of the scripts that runs on that page. However, I can see no change in the select boxes. The library has definitely been added, as confirmed by a call to drupal_get_library, however I must still be doing something wrong.
    – KerrM
    Mar 20, 2012 at 20:39
  • 1
    Is your code wrapped in a $(document).ready()?
    – Clive
    Mar 20, 2012 at 20:48
  • Ah. Yep, that did it. Should've thought of that earlier! Thanks!
    – KerrM
    Mar 20, 2012 at 21:04
0

You would have to download the .js file and put it on your server. Then reference it this way:

drupal_add_js(drupal_get_path('theme', 'YOUR_THEME_NAME'). '/js/jquery.ui.selectmenu.js');

Don't use drupal_add_library

2
  • Hi there Brian. Thanks for the reply. Unfortunately that didn't work - I tried adding the CSS file also to no avail. Thanks for the reply though! I'll keep searching and trying.
    – KerrM
    Mar 20, 2012 at 20:41
  • You added it to the right place (your js directory in your themes directory) and changed 'YOUR_THEME_NAME' to your actual theme name correct? If you view source is the select menu js file being loaded? Are there errors in your console? Mar 20, 2012 at 20:44

Your Answer

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

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