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。

查看参数，我没有看到任何值得注意的东西。

# 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。因此，当您提交表单时，Rails 的 UJS 会进入中间并创建一个 ajax 请求。当您在表单上使用submit() 方法时，它不允许 Rails 正确处理 ajax 请求，因为它不会触发 Rails 预期的事件。

您可以使用 Rails 的 javascript 对象辅助方法来触发提交，而不是使用 javascript 的 submit() 方法。比如：

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

这将触发 'submit' 事件而不是提交表单，因此现在所有 rails 的回调都将处理 rails 的属性，如 remote: true、disable_with: ...、confirm: ... 等。

编辑：添加参考： https://github.com/rails/rails/tree/master/actionview/app/assets/javascripts/rails-ujs

start.coffee 设置事件回调，而 utils/events.coffee 定义 fire 函数

EDIT2：这是 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，我是自己阅读代码了解到的，除了来源之外，我不知道在哪里指出你，对不起！