jQuery

23 August, 2008

Drupal.behaviors + jQuery: multiple buttons with the same name

While working for Mollom, I faced the problem of needing multiple buttons with the same name. In my case, this was an absolute necessity on an advanced multi-step form. Sounds super … easy, right? But HTML doesn’t support this!

Thankfully, the combination of Drupal.behaviors and jQuery makes it easy to create a work-around! jQuery makes it easy to write the necessary code, Drupal.behaviors makes it trivial to ensure it keeps working even when new content has been added to the page (i.e. after an AHAH callback).

You would have a piece of Forms API code like this:

$form['step1']['edit'] = array(
  '#type'       => 'submit',
  '#value'      => t('Edit step 1'),
  '#submit'     => array('subscriptions_create_edit_step1'),
  '#attributes' => array('class' => 'edit-step-button'),
);

// … more form definition code

$form['step4']['edit'] = array(
  '#type'       => 'submit',
  '#value'      => t('Edit step 4'),
  '#submit'     => array('subscriptions_create_edit_step4'),
  '#attributes' => array('class' => 'edit-step-button'),
);

As you can see, nothing remarkable about this, except for one thing: we’ve set the class attribute. This is used in our Drupal.behaviors method to detect which buttons this behavior should be applied to.

24 August, 2007

New in Panels 2: Mini Panels and Panel Styles

A couple of weeks ago, I agreed to work on the Panels Mini module, which would become part of the second version of Earl Miles’ outstanding Panels module. While working on that, I suggested to let modules implement styles for panels. (I was inspired by Nedjo Rogers’ Panelsblock module, which sort of gives you “tabbed Mini Panels” for Panels 1). All you then would have to do, is: pick the Panel Style in the settings for the Mini Panel (or whatever other Panels implementation chooses to support it) and then change the CSS to get exactly what you want. This should prove to be a real timesaver.

More about Panel Styles I’ve written 2 Panel Styles so far:

Carousel Panel Style and Tabs Panel Style. The latter might be included in Panels 2. Both were sponsored by Paul Ektov.
To write a Panel Style, you only have to implement 2 hooks, or 4 hooks if you want to offer configuration options. Hopefully that will result in many contributed Panel Styles!

jQuery