防止在Rails AJAX表单中重复提交
防止在Rails AJAX表单中重复提交
提问于 2012-07-16 21:52:22
我所拥有的：
我有一个表单，我通过AJAX提交。
<%= form_for([@map, @annotation], :remote => true ) do |f| %>
...
<%= f.submit "Save annotation", :class => "btn btn-primary", :id => "annotation-submit-button" %>
<% end %>我想要的：
我想防止双重提交。由于表单只有在请求成功完成时才会消失，因此只要数据库尚未完成数据写入，用户就可以单击submit按钮。很明显，我不想这样。
我尝试过的：
我尝试将此添加到提交按钮本身-但它不起作用。该按钮被禁用，但不会发送任何数据。
:onclick => "this.disabled = true"我还尝试向submit按钮添加一个click处理程序。这与之前具有相同的效果。实际上不会向控制器发送任何数据，但该按钮被禁用。
$("#annotation-submit-button").click(function(event) {
$(this).attr("disabled", "disabled");
return false;
});在没有返回false的情况下也尝试了相同的方法。禁用该按钮后，没有任何反应。
$("#annotation-submit-button").click(function(event) {
$(this).prop("disabled", "disabled");
});我开始认为这是Rails特有的东西？
回答 4
Stack Overflow用户
回答已采纳
发布于 2012-07-16 22:20:36
在Rails 3及更高版本的视图中尝试disable_with：
<%= f.submit "Save annotation", :data => {:disable_with => "Saving..."}, ... %>对于Rails 2：
<%= f.submit "Save annotation", :disable_with => "Saving...", ... %>Stack Overflow用户
发布于 2012-07-16 21:57:15
禁用该按钮应该可以正常工作。
只需在执行ajax调用的同一函数中禁用该按钮。
$("#annotation-submit-button").click(function(event) {
// do ajax call
$.ajax(...);
// disable the button
$(this).prop("disabled", true);
// prevent the standard action
return false;
});但是，从jQuery 1.6开始，您应该使用prop()而不是attr()。
编辑：
在回复您的评论时，尝试省略return false;，这样就不会通过Rails中断表单提交的执行。
$("#annotation-submit-button").click(function(event) {
// disable the button
$(this).prop("disabled", "disabled");
// do not return false since this stops the event propagation
});Stack Overflow用户
发布于 2012-07-16 22:01:54
By jQuery:您可以执行以下操作来处理所需的操作
$.ajax({
.....,
beforeSend: function (){ $('#your-button').attr('disabled', 'disabled'); },
success: function (){
// Here you can enable the button
}
});希望这能对你有所帮助
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/11505801
复制相关文章
相似问题
腾讯云开发者
