Hackery, Math & Design

Steven Wittens i

Improved Weights in Drupal - Up/down

Whenever we have an ordering problem in Drupal, we use 'weights': the user assigns weights to the items, and these are used as sorting keys. It works, but it's not very intuitive.

I had the idea for making a JavaScripted up/down system: just provide up/down buttons instead of the weight selector when JavaScript is present, and use the DOM to swap the rows real-time, reflecting the new arrangement and updating the weights behind the scenes in hidden form values.

You can see a quick prototype at http://acko.net/dumpx/sort.html. The output is not very pretty though...

In theory it worked nicely: it doesn't require special changes to tables, it plugs into Drupal's existing weight system (after all, it's only a different interface to assigning weights), and it reverts to the old method for non-JS environments.

In practice, there are numerous issues already:

  • (All?) When using the browser's back button, the rows revert back to their original order, rather than the order when the form was submitted. Unfortunately the hidden form inputs do retain their correct values (except in IE, amazing), so the visual order no longer matches the internal order.
  • (Moz/Fx only?) For some reason when submitting a reordered set, and pressing the back button, the weights inside the hidden form values sometimes get changed and corrupted. When you submit again, one of the weights disappears (try C,B,A,D for example, weight '1' will disappear).
  • (Safari only?) Apparently in Safari the correct weights are not used when you submit. At first I thought it might have something to do with the <noscript>'ed inputs interfering, but I changed the names and it's still broken. The code is written so that rows only get swapped after the weights have been succesfully swapped, so that's not it either. Does Safari ignore changes made to inputs' values through Javascript?
  • (IE only) Apparently in IE you cannot swap (or modify?) the innerHTML of table rows; this causes an "unknown runtime error" in JavaScript. You have to swap the contents of cells only. Annoying.

Don't you just love it when browsers cooperate? :?

Guess I'll have to look at existing implementations for inspiration. Hopefully I'll be able to keep at least some of the lightweight, non-intrusive method I have now.

Dev  Drupal

This article contains graphics made with WebGL, which your browser does not seem to support.
Try Google Chrome or Mozilla Firefox. ×