Rails，输入模糊后返回自动提交表单：ActionController :: UnknownFormat

Question

  

目标：在任何输入模糊后自动提交表单。

我的方法：

在表单中使用remote: true，告诉Rails我想通过Ajax提交，然后在控制器#create中，我添加了一个respond_to块，最后，我还创建了create.js.erb文件完成。

如果有人点击“提交”，那就行得很好但是blur时自动提交呢？为实现这一目标，我按了this 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隐藏了提交按钮。

基本上，提交时不是auto submit我{m} auto clicking。

即使这样可行，感觉应该有更好的解决方案。