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

Question

I'm building a Rails app and have a Javascript form using AJAX and JQUERY. The form is submitting correctly and the content is injecting into the DOM just fine but once this happens the submit button greys out and a new request cannot be submitted until I refresh the page.

I compared the code to a previous app I built and it's identical. The only difference I can see is that the previous app was built with Rails '4.2.10' and this new one uses 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

In your case I think the problem is you use e.preventDefault() when you submit, but you didn't replace this form with new content. So this form will stay in submitting status.

Since you are using Rails 5.2, I'll recommend to use form_with instead of jQuery ajax. It's default as ajax request in Rails way and you just have to render partial you want in create.js.erb .

It will be something like this:

orders/_form.erb

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

And your 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)

And don't forget to include rails-ujs in your assets pipeline, or import it in case you use webpacker.

Answer 2

Ok I figured it out. Rails 5 automatically disables the submit button after submitting a request. I had to add

data: { disable_with: false }

to my submit button in my view.