Отключение кнопки отправки AJAX после одного запроса

Question

Я создаю приложение Rails и у меня есть форма Javascript, использующая AJAX и JQUERY. Форма отправляется правильно, а содержимое просто внедряется в 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

Хорошо, я понял это.Rails 5 автоматически отключает кнопку отправки после отправки запроса.Мне пришлось добавить

данные: {disable_with: false}

к моей кнопке отправки в моем представлении.

Answer 2

В вашем случае, я думаю, проблема в том, что вы используете e.preventDefault() при отправке, но вы не заменили эту форму новым контентом.Таким образом, эта форма останется в статусе отправки.

Поскольку вы используете Rails 5.2, я рекомендую использовать form_with вместо jQuery ajax.По умолчанию это как ajax-запрос в Rails, и вам просто нужно отрендерить частичку, которую вы хотите, в 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.