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：false}

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

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

2 个答案: