jquery - 防止 Rails AJAX 表单中的重复提交

标签 jquery ruby-on-rails ajax ruby-on-rails-3 submit

我有什么:

我有一个通过 AJAX 提交的表单。

<%= form_for([@map, @annotation], :remote => true ) do |f| %>
   ...
   <%= f.submit "Save annotation", :class => "btn btn-primary", :id => "annotation-submit-button" %>
<% end %>

我想要什么:

我想防止重复提交。由于表单仅在请求成功完成后才会消失,因此只要数据库尚未完成数据写入,用户就可以单击提交按钮。显然,我不希望这样。

我尝试过的:

我尝试将其添加到提交按钮本身 - 但它不起作用。该按钮被禁用,但没有发送任何数据。

:onclick => "this.disabled = true"

我还尝试向提交按钮添加点击处理程序。这与之前的效果相同。实际上没有数据发送到 Controller ,但按钮被禁用。

$("#annotation-submit-button").click(function(event) {
  $(this).attr("disabled", "disabled");
  return false;
});

也尝试了相同的操作,但没有返回 false。禁用按钮后没有任何反应。

$("#annotation-submit-button").click(function(event) {
  $(this).prop("disabled", "disabled");
});

我开始认为这是 Rails 特有的东西?

最佳答案

尝试disable_with对于 Rails 3 及更高版本,在这样的 View 中:

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

对于 Rails 2:

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

关于jquery - 防止 Rails AJAX 表单中的重复提交,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11505801/

相关文章:

ruby-on-rails - 销毁对象时清空列名

ruby-on-rails - 无法使表单 date_select 隐藏在 rails 中

ruby-on-rails - 我们如何在其他 Controller View 中使用一个 Controller 方法?

ajax - Mongodb 总行数限制

javascript - Jquery 成功时运行函数

javascript - 无法弄清楚 jQuery ajax 调用参数

javascript - Jquery 悬停在 html 中不起作用

jQuery dataTables 改变输入搜索

Javascript 将函数绑定(bind)到 Ajax 加载事件

jquery - fancybox,使用非图库的图像和 div 制作幻灯片