一个请求后禁用AJAX提交按钮

Question

我正在构建一个Rails应用程序，并使用AJAX和JQUERY编写了Javascript表单。 表单可以正确提交，内容可以很好地注入到DOM中，但是一旦发生这种情况，提交按钮就会变灰，并且只有在刷新页面后才能提交新请求。

我将代码与我之前构建的应用程序进行了比较，并且完全相同。 我可以看到的唯一区别是，以前的应用程序是用Rails'4.2.10'构建的，而这个新应用程序使用的是Rails'5.2.3'

$('#new_order').on('submit', function(e) {
  $.post(this.action, $(this).serialize())
   .done(function(response) {
    let o = new Order(response)
    $('#order_address').val("")
    $('order_special_instructions').val("")
    $('#orders').append(o.format())
  }).error(function() {
    alert('error')
  })
  e.preventDefault()
})

Answer 1

在您的情况下，我认为问题在于您在提交时使用e.preventDefault() ，但没有用新内容替换此表单。 因此，此表格将保持提交状态。

由于您使用的是Rails 5.2，因此我建议您使用form_with而不是jQuery ajax。 在Rails中，它默认为ajax请求，而您只需要在create.js.erb呈现所需的部分。

将会是这样的：

orders/_form.erb

<%= form_with model: Order.new, url: orders_path do |f| %>
<%= f.submit %>

还有你的create.js.erb

let orderForm = "<%= j(render('orders/form')) >";
$('#new_order').html(orderForm);
$('#order_address').val("")
$('order_special_instructions').val("")

let order = "<%= j(render('orders/order')) >"
$('#orders').append(order)

并且不要忘记在资产管道中包括rails-ujs，或者在使用webpacker的情况下将其导入。

Answer 2

好吧，我知道了。 提交请求后，Rails 5自动禁用“提交”按钮。 我必须添加

数据：{disable_with：假}

转到我视图中的“提交”按钮。