jQuery ui buttonset is not a function in Drupal 7

Question

Like the title of this post suggests, I'm trying to add a fancy jQuery ui buttonset to my custom Drupal 7 module. But I'm getting the error message "TypeError: jQuery(...).buttonset is not a function" in Firebug. How can this be fixed? Do I need to update Drupal's internal jQuery ui version or something? Or maybe I need to add the buttonset widget manually?

Thanks for the help.

HTML:

<div id="edit-service-amount" class="form-radios">
<div class="form-item form-type-radio form-item-service-amount">
<input id="edit-service-amount-0" class="form-radio" type="radio" value="0" name="service_amount">
<label class="option" for="edit-service-amount-0">Enkel </label>
</div>
<div class="form-item form-type-radio form-item-service-amount">
<input id="edit-service-amount-1" class="form-radio" type="radio" checked="checked" value="1" name="service_amount">
<label class="option" for="edit-service-amount-1">Dubbel </label>
</div>
</div>

JS:

jQuery(document).ready(function() {
 jQuery('.form-item-service-amount').buttonset();
}

Answer 1

You're probably just missing the UI button library (libraries are added when they're needed rather than every js file being included for every page).

To fix, add this in your page callback:

drupal_add_library('system', 'ui.button');

To ensure your JS code is invoked after AJAX calls, you just need to wrap it in a Drupal behaviour:

(function($) {
  Drupal.behaviors.myModule = {
    attach: function(context, settings) {
      $('.form-item-service-amount', context).once('mymodule').buttonset();
    }
  };
})(jQuery);

There's no need to use ready() in this context, Drupal will fire attachBehaviors() on document load, and when ajax calls occur, and your module's attach function will be called each time.

once() just makes sure the buttonset is only applied to an individual element once only, to avoid reattaching behaviours to elements that have already had it.