Rails 3 : In submit button :disable_with is not working - ruby-on-rails-3

Question

In this following code :disable_with is not working in rails 3. But it is perfectly working in rails 2.2
What is wrong in this code?
<%= submit_tag "Save", :class => "buttons",
:disable_with => "Processing",
:id => 'save_btn' %>

Answer 1

Since version 3.2.5 you should not use :disable_with.
<%= submit_tag "Save", 'data-disable-with' => "Processing", :class => "buttons", :id => 'save_btn' %>
or
<%= submit_tag "Save", data: { disable_with: "Processing" }, :class => "buttons", :id => 'save_btn' %>

Answer 2

Check the following in your raw html:
the submit button has data-disable-with attribute
your page includes jQuery js. For me I have:
https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js
you page includes jquery_ujs js. For me I have:
/javascripts/jquery_ujs.js
You can read more on https://github.com/rails/jquery-ujs. Different installations for different rails versions.

Answer 3

I had a similar issue on Safari 8.0.6 and latest rails-ujs. Here's my approach of solving this issue:
%button{ class: 'btn btn-action js-submit', data: { method: :put, 'href' => '...', disable_with: "<i class='icon icon-spinner icon-spin'></i>".html_safe }} Submit
$('.js-select-plan').click(function(event) {
event.preventDefault();
var $target = $(this),
href = $target.data('href'),
method = $target.data('method'),
formTarget = $target.attr('target'),
csrfToken = $('meta[name=csrf-token]').attr('content'),
csrfParam = $('meta[name=csrf-param]').attr('content'),
form = $('<form method="post" action="' + href + '"></form>'),
metaData = '<input name="_method" value="' + method + '" type="hidden" />';
if (csrfParam !== undefined && csrfToken !== undefined) {
metaData += '<input name="' + csrfParam + '" value="' + csrfToken + '" type="hidden" />';
}
if (formTarget) {
form.attr('target', formTarget);
}
// disable button/link element
var contentMethod = $target.is('button') ? 'html' : 'val';
var replacement = $target.data('disable-with');
$target.data('ujs:enable-with', $target[contentMethod]());
if (replacement !== undefined) {
$target[contentMethod](replacement);
}
$target.prop('disabled', true);
form.hide().append(metaData).appendTo('body');
setTimeout(function(){
form.submit();
}, 50);
});
This works like a charm in all browsers. For better flexibility you might want to wrap this in a helper.