Prevent double submits in a Rails AJAX form

Try disable_with in the view like this for Rails 3 and above:

<%= f.submit "Save annotation", :data => {:disable_with => "Saving..."}, ... %>

For Rails 2:

<%= f.submit "Save annotation", :disable_with => "Saving...", ... %>

Disabling the button should work just fine.

Just disable the button in the same function where you execute your ajax-call.

$("#annotation-submit-button").click(function(event) {  // do ajax call  $.ajax(...);  // disable the button  $(this).prop("disabled", true);  // prevent the standard action  return false;});

However, as of jQuery 1.6 you should use prop() instead of attr().

Edit:

In reply to your comment try omitting the return false; so you don't interrupt the execution of the formsubmit via Rails.

$("#annotation-submit-button").click(function(event) {  // disable the button  $(this).prop("disabled", "disabled");  // do not return false since this stops the event propagation});

By jQuery:you can do the following to handle the action you want

$.ajax({  .....,  beforeSend: function (){ $('#your-button').attr('disabled', 'disabled'); },  success: function (){     // Here you can enable the button  }});

Hope this may help you