Tell me more ×
Drupal Answers is a question and answer site for Drupal developers and administrators. It's 100% free, no registration required.
up vote 2 down vote favorite

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?

share|improve this question

2 Answers

up vote 2 down vote accepted

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.

share|improve this answer
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 '12 at 20:39
1  
Is your code wrapped in a $(document).ready()? – Clive♦ Mar 20 '12 at 20:48
Ah. Yep, that did it. Should've thought of that earlier! Thanks! – KerrM Mar 20 '12 at 21:04
up vote 0 down vote

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

share|improve this answer
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 '12 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? – Brian Reeves Mar 20 '12 at 20:44

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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