2

I have created a form within the administrative front-end in my Drupal 7 site to allow administrators to change some configuration options. I've defined the path to it in the following way (in hook_menu):

$items['admin/config/system/my_site_name/status'] = array(
  'title' => 'Change site status',
  'description' => 'My description',
  'access arguments' => array('administer site configuration'),
  'page callback' => 'drupal_get_form',
  'page arguments' => array('my_form_name'),
  'file' => 'forms_file.inc',
);

I want one of the items in this form to be a jQuery UI slider, bound to a hidden select element that has its same value, which is then fetched in the form's submit method (pretty much like in here: http://jqueryui.com/slider/#hotelrooms) by creating a .js file with the following.

(function ($) {
  Drupal.behaviors.site_status = {
    attach: function(context) {
      var select = $("#edit-site-status");
      var slider = $( "<div id='status-slider'></div>" ).insertAfter(select).slider({
        min: 0,
        max: 4,
        range: "min",
        value: select[0].selectedIndex,
        slide: function( event, ui ) {
          select[0].selectedIndex = ui.value;
        }
      });
      $( "#edit-site-status" ).change(function() {
        slider.slider( "value", this.selectedIndex);
      });
    }
  }

})(jQuery);

However, I've been unable to load the widget, as it seems the whole jQuery UI js file is missing.

TypeError: $(...).insertAfter(...).slider is not a function

According to http://redhotchilliproject.com/blog/jquery-and-jquery-ui-in-drupal-7, I should manually load the jQuery file in some preprocess function, like this.

function MY_THEME_preprocess_page(&$variables, $hook) {
  drupal_add_library('system','ui.slider');
}

However this method doesn't get called from the page that contains my form. I've even tried to load the jQuery library in MY_THEME_preprocess() without any luck.

I don't want to include the file in the my_module.info file, as I only need the slider to be in the administrative front-end and most users won't need it.

How can I get this slider to show up?

2

drupal_add_library() can be called from pretty much anywhere, including your form function:

function my_form_name($form, &$form_state) {
  drupal_add_library('system','ui.slider');

  // Build and return the form.
}
2

As alternative to Clive's answer, you can use the #attached property. The example in the documentation makes clear how to attach a library to a form.

if (!$user->uid) {
  $form['#attached']['library'][] = array('system', 'jquery.cookie');
  $form['#attributes']['class'][] = 'user-info-from-cookie';
}

Using #attached is the suggested way in Drupal 8, which doesn't use anymore the hook_init() hook.

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.