一個請求后禁用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：假}

轉到我視圖中的“提交”按鈕。