Rails / Javascript: почему я получаю сообщение об ошибке при отправке формы через javascript `submit ()`?

Question

У меня есть форма поиска в представлении.

  <%= form_with url: issues_path, class: 'filter-box' do %>
    <%= text_field_tag(:filter_by, '', id: 'filter-text-field') %>
  <% end %>

Когда форма отправлена, выполняется следующее действие:

class IssuesController < ApplicationController
  ...

  def create
    @labels = Label.by_search_term(params[:filter_by])
    respond_to do |format|
      format.js
    end
  end
end

Все работает хорошо.

Однако я хочу, чтобы действие запускалось при каждом нажатии клавиши.С этой целью я добавил следующий javascript.

  <script>
    document.getElementById('filter-text-field').addEventListener('keyup', function(){
      document.querySelector('.filter-box').submit()
    })
  </script>

Но когда форма отправляется на ключ вверх, она ломается, и я получаю ошибку: ActionController::UnknownFormat in IssuesController#create.

Просмотрparams, я не вижу ничего примечательного.

# Submitted by pressing return
# => <ActionController::Parameters {"utf8"=>"✓", "authenticity_token"=>"TJRajeBbEK8+D0Ly5/lbI/SVx8srhG/YS2W1l+Zc+f+TYmsbfehXnsluxOovblCrWBLJy0exhyzhsY+qPhBDOQ==", "filter_by"=>"d", "controller"=>"issues", "action"=>"create"} permitted: false>

# Submitted on keyup
# => <ActionController::Parameters {"utf8"=>"✓", "authenticity_token"=>"7NBwqCuJpbFGvxWgq6qqdB1hF0yptca0N446G4nQ620zJkE+tjrigLHek7hjPaH8seYZTMWALkCdWgAmUZxRqw==", "filter_by"=>"d", "controller"=>"issues", "action"=>"create"} permitted: false>

В чем разница между отправкой формы нажатием клавиши ввода и отправкой формы через javascript?Что мне нужно сделать, чтобы убедиться, что он работает правильно?

Answer 1

Помощник

Rails * form_with устанавливает форму по умолчанию remote: true.Итак, когда вы отправляете форму, UJS Rails встает посередине и создает запрос ajax.Когда вы используете метод submit() в форме, он не позволяет Rails правильно обрабатывать запрос ajax, поскольку он не вызывает события, ожидаемые Rails.

Вы можете использовать вспомогательные методы объекта JavaScript Rails дляинициировать отправку вместо метода submit() в JavaScript.Примерно так:

document.getElementById('filter-text-field').addEventListener('keyup', function(){
  Rails.fire(this.form, 'submit')
})

Это вызовет событие submit вместо отправки формы, так что теперь обратный вызов всех rails будет обрабатывать атрибуты rails, такие как remote: true, disable_with: ..., confirm: ...,и т. д.

РЕДАКТИРОВАТЬ: ссылки addign: https://github.com/rails/rails/tree/master/actionview/app/assets/javascripts/rails-ujs

start.coffee устанавливает обратные вызовы событий и utils / events.coffee определяет функцию fire

EDIT2: Thisэто часть, в которой Rails добавляет все обратные вызовы для события submit формы https://github.com/rails/rails/blob/master/actionview/app/assets/javascripts/rails-ujs/start.coffee#L55-L62

Это функция для запуска событий с использованием вспомогательного класса Rails https://github.com/rails/rails/blob/master/actionview/app/assets/javascripts/rails-ujs/utils/event.coffee#L34

Я неконечно, если для этого есть DOC, я изучил это, читая код самостоятельно, я не уверен, куда вам указать, кроме источника, извините!