Rails 3. how to use disable_with in button tag?

Question

I recently started testing web_app_theme plugin. In Create button I have something like this...

<button class="button" type="submit">
  <%= image_tag("web-app-theme/icons/tick.png", :alt => "#{t("web-app-theme.save", :default => "Save")}") %> <%= t("web-app-theme.save", :default => "Save") %>
</button>

How can I add :disable_with => "Processing" to this button to prevent duplicate records?

I tried t("web-app-theme.save", :default => "Save"), :disable_with => "Processing", but of course, that didn't work.

Answer 1

You need to use form tag helper methods - something like this should do it:

<%= button_tag :class => "button", :type => "submit", :data => { :disable_with => "Processing" } do %>
  <%= image_tag("web-app-theme/icons/tick.png", :alt => "#{t("web-app-theme.save", :default => "Save")}") %> 
  <%= t("web-app-theme.save", :default => "Save") %>
<% end %>

Here's a link to the API docs for the button_to method: http://api.rubyonrails.org/classes/ActionView/Helpers/UrlHelper.html#method-i-button_to

Updated Dec 14, 2013 for Rails 3.2 & 4 syntax.

Answer 2

button_tag is entirely optional. You could just as easily edit the tag in html as follows:

<button class="button" type="submit" data-disable-with="Processing">
  <%= image_tag("web-app-theme/icons/tick.png", :alt => "#{t("web-app-theme.save", :default => "Save")}") %> <%= t("web-app-theme.save", :default => "Save") %>
</button>

All that :disable_with does is add a data-disable-with attribute to the element. Then the jquery-rails gem's javascript (jquery_ujs.js) does the rest of the disabling work for you.

This is assuming, of course, that you're on rails 3.0 or higher.