1

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();
}
  • 1
    What version of jQuery UI are you using? – Clive Jun 26 '14 at 12:45
  • Newest version of Drupal 7 at this moment 7.28. jQuery ui 1.8.7. – Floris Jun 26 '14 at 12:47
0

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.

  • The error is gone. Thanks. It's not working yet. This might have something to do with me doing a Drupal form ajax call and loading the radios HTML dynamicly. Or the HTML structure isn't what buttonset is expecting. – Floris Jun 26 '14 at 13:22
  • Almost definitely the ajax thing..it's an easy fix though, I've added a bit more to the answer – Clive Jun 26 '14 at 13:28
  • Getting closer now... project.codestars.nl/download/buttonset.png. It renders something weird at this moment. – Floris Jun 26 '14 at 13:40
  • Ah, I need to overwrite some CSS values of the form and then it will look the way it should. Thanks, problems solved! – Floris Jun 26 '14 at 13:49

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.