Rails，輸入模糊后自動提交表單返回：ActionController :: UnknownFormat

Question

目標： 在任何輸入模糊之后自動提交表單。

我的方法：

在表單中使用remote: true來告訴Rails我要通過Ajax提交，然后在controller＃create中，添加了respond_to塊，最后，我還創建了create.js.erb文件來完成。

如果有人單擊“提交”，那很好用...但是blur時自動提交呢？ 為此，我遵循了此SO並添加了autoSubmitForm()函數，但沒有起作用，顯示了此錯誤：

現在，錯誤：

Started POST "/e/0-8d5ac093-3611-4b46-a220-41eb880e6732/elements/10/posts" for 127.0.0.1 at 2018-03-08 15:41:38 -0600
  User Load (0.4ms)  SELECT  "users".* FROM "users" WHERE "users"."id" = $1 ORDER BY "users"."id" ASC LIMIT $2  [["id", 2], ["LIMIT", 1]]
Processing by PostsController#create as HTML
  Parameters: {"utf8"=>"✓", "authenticity_token"=>"MZQoS9PsHn50pAXmPUnbk2NjzgLOSps0rn87hYw/lyXD96N0EyzRXTVChazenb1AxL9GnpZ/GH7do3LsEp9zUg==", "answer"=>{"message"=>"MTY"}, "profile_id"=>"0-8d5ac093-3611-4b46-a220-41eb880e6732", "element_id"=>"10"}
  Profile Load (0.2ms)  SELECT  "profiles".* FROM "profiles" WHERE "profiles"."profileable_id" = $1 AND "profiles"."profileable_type" = $2 LIMIT $3  [["profileable_id", 2], ["profileable_type", "User"], ["LIMIT", 1]]
   (0.1ms)  BEGIN
  Element Load (0.2ms)  SELECT  "elements".* FROM "elements" WHERE "elements"."id" = $1 LIMIT $2  [["id", 10], ["LIMIT", 1]]
  SQL (0.3ms)  INSERT INTO "posts" ("element_id", "message", "created_at", "updated_at", "profile_id") VALUES ($1, $2, $3, $4, $5) RETURNING "id"  [["element_id", 10], ["message", "MTY"], ["created_at", "2018-03-08 21:41:38.121299"], ["updated_at", "2018-03-08 21:41:38.121299"], ["profile_id", 4]]
   (6.0ms)  COMMIT
Completed 401 Unauthorized in 12ms (ActiveRecord: 6.8ms)



ActionController::UnknownFormat - ActionController::UnknownFormat:
  app/controllers/posts_controller.rb:9:in `create'

Started POST "/__better_errors/f572adc255d87208/variables" for 127.0.0.1 at 2018-03-08 15:41:38 -0600


ActionController::UnknownFormat - ActionController::UnknownFormat:
  app/controllers/answers_controller.rb:9:in `create'

Started POST "/__better_errors/f572adc255d87208/variables" for 127.0.0.1 at 2018-03-08 15:41:38 -0600

我也嘗試添加onchange: 'this.form.submit();' 輸入，但返回相同的錯誤。

帖子創建的很好，但是在實現respond_to時會中斷。

auto_submit_function.js

$(document).on('turbolinks:load', function() {
  autoSubmitForm()
})

function autoSubmitForm() {
  $('form :input').blur(function() {
    $(this).closest('form').submit();
  });
}

控制者

class PostsController < ApplicationController
  before_action :authenticate_user! # I'm using devise

  def create
    @answer = Post.new(posts_params)
    @answer.save
    respond_to do |format|
      format.js
    end
  end

  private

  def posts_params
    params.permit(:post).require(:message)
  end
end

_form.html.haml

= form_for [article, post], 
  remote: true, 
  authenticity_token: true, 
  html: { id: "new_post_#{article.id}" } do |form|

  = form.text_field :message
  = form.label :message
  = form.submit

create.js.erb

console.log('I can take it from here, thanks!')

Answer 1

我只是發現了一種稍微不同的方法。

代替：

$(document).on('turbolinks:load', function() {
  autoSubmitForm()
})

function autoSubmitForm() {
  $('form :input').blur(function() {
    $(this).closest('form').submit(); // <<<<< Remove this
    $('#submit_' + $(this).attr('id')).trigger('click'); // <<< Add this
  });
}

並為每個submit按鈕添加一個自定義ID（我在同一視圖中有多個表單）。 另外，我用CSS隱藏了Submit按鈕。

基本上，不是auto submit ，而是auto clicking提交。

即使這種方法可行，也感覺應該為這種情況提供更好的解決方案。