Rails 3. How to use disable_with in a button tag?

Question

I recently started testing the web_app_theme plugin. In the 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 to add :disable_with => "Processing" to this button to prevent duplicate entries?

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

Answer 1

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

 <%= 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 is a link to API documents for the button_to method: http://api.rubyonrails.org/classes/ActionView/Helpers/UrlHelper.html#method-i-button_to

Updated December 14, 2013 for Rails 3.2 and 4 syntax.

Answer 2

button_tag is completely optional. You can 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 does :disable_with is to add the data-disable-with attribute to the element. Then jquery-rails gem javascript (jquery_ujs.js) does the rest of the disconnect work.

This assumes, of course, that you are on rails 3.0 or higher.