代码之家 › 专栏 › 技术社区 › user3574603

rails/javascript:当我通过javascript'submit()'提交表单时,为什么会收到错误?

ruby ruby-on-rails javascript

user3574603 · 技术社区 · 6 年前

我有一个视图中的搜索表单。

  <%= 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>

但是当表单在key up上提交时,它会中断,我会得到一个错误: 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>

按Enter提交表单和通过javascript提交表单有什么区别?我需要做什么来确保它正常工作?

1 回复 | 直到 6 年前

arieljuod 6 年前

铁轨 form_with 帮助程序将窗体设置为 remote: true 默认情况下。因此,当您提交表单时,Rails的UJS会在中间进行操作,并创建一个Ajax请求。当你使用 submit() 方法,它不允许Rails正确处理Ajax请求,因为它不会触发Rails期望的事件。

您可以使用Rails的javascript对象帮助器方法来触发提交,而不是javascript的 提交() 方法。类似:

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

这将触发“提交”事件而不是提交表单,因此现在所有rails的回调都将处理rails的属性,如 远程:真 , 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的helper类触发事件的函数 https://github.com/rails/rails/blob/master/actionview/app/assets/javascripts/rails-ujs/utils/event.coffee#L34

我不确定是否有这个的医生,我已经学会了自己阅读代码,我不确定你应该指向哪里,除了源代码,对不起!