Real Buttons in Rails - A Route to Sexy Forms // writing
Coming from a CSS/XHTML Web Standards background my approach to Rails has been slightly different from others. My views on the borderline heretical inline Javascript of some of the more AJAX-y methods has been dealt with by Dan and Luke and their utterly fabulous Unobtrusive Javascript plugin.
If you want to know what I’m talking about, look at the words of the masters or check out Dan’s slides from Rails Conf ’07. Suffice to say Javascript should always be an addition to an already functional website, unless it’s doing something really clever (Google Maps, I’m looking at you).
However, whilst getting into RESTful Rails on my current project, I’ve needed to continually use buttons (button_to) for changes of state. Just like a good Rails programmer should when using POST or DELETE requests i.e. ‘Add to Carts’ or more seriously ‘Delete’ objects. This leads to layout issues, the input tags generated are hideous on Firefox and not stylable (Aqua only) on Safari. The different sizes also mess with my lovely horizontal grid!
Then I rediscovered the button element with many thanks to the lovely chaps at particle tree creators of an awesome online form maker. The gist of the article is that the button element is a clever little bugger than can be styled much more freely than the typical input submit button and is more flexible than a load of image submits. You can look at the article for their approach.
All I’ve done is created a mixin to create a couple of view helpers which you can use in place of the regular button_to and submit_tag they are based from the existing versions and simply provide a button tag instead of an input tag.
This means however you can do much sexier looking buttons the proper way using CSS (see the particle tree article to start) and stop using that horrible link_to with :method => :delete javascript nonsense.
You can get the plugin by typing:
script/plugin install http://svn.deepcalm.com/plugins/real_buttons/
Your feedback is welcome!
Comments
Tim Chater
I like it, but I have run into some browser compatibility issues when using more than one button on a form. I think the button_submit_tag should have the value attribute set. (Obviously this can be achieved manually by adding “:value => whatever” but it would be great to have it built in.)
What do you think? Thank you.