远程：form_for 的 true 选项适用于新操作，但不创建操作

【问题标题】：remote: true option for form_for working for new action, but not create action远程：form_for 的 true 选项适用于新操作，但不创建操作
【发布时间】：2014-03-20 21:21:43
【问题描述】：

更新：

这个问题已经解决了！这是一个困难的，因为它根本不是很容易调试。但是在注意到我在表单标签中有一个表单标签时，我亲切的“回答者”指出，无论这是否是问题的根本原因，都需要解决这个问题。请记住，我同意他的观点，nested attributes 绝对是继续这个的方法，但是因为此时这是一个学校项目，我选择暂时将内部形式移到外部形式之外让它按照我的预期去做。这涉及更改您在下面看到的一些代码。但我不会发布那个新代码，因为我再次同意nested attributes 是在这种情况下要走的路。当我有时间时，这将是我这个项目的下一个目标。

原问题：

我正在使用 Rails 4，我有这样的嵌套资源：

resources :data do
  resources :todo_items
end

在datum 对象的编辑页面中，我打算让用户能够通过ajax 将todo_items 添加到datum 对象。当您单击“添加待办事项”按钮时，会请求我创建新的todo_item 的表单，并且在填写必填字段后，用户可以单击添加，并且我打算发出另一个请求，该请求将将todo_item 显示为部分内容，其中包括一个复选框，供用户显示它是否完整。新表单很好，但是当我单击添加按钮以显示新创建的todo_item 时出现ActionController::UnknownFormat 错误。这是我正在使用的代码：

app/views/data/_form.html.erb

...
<%= link_to 'Add ToDo', new_datum_todo_item_path(@datum.id), remote: true %>
...

app/controllers/todo_items_controller.rb

class TodoItemsController < ApplicationController
  def new
    @datum = Datum.find(params[:datum_id])
    @todo = TodoItem.new
    respond_to do |format|
      format.js
    end
  end

  def create
    @datum = Datum.find(params[:datum_id])
    @todo = @datum.todo_items.create!(todo_item_params)
    respond_to do |format|
      format.js
    end
  end

  private

    def todo_item_params
      params.require(:todo_item).permit(:task, :content, :done)
    end
end

app/views/todo_items/_form.html.erb（“新”表单）

<div id="<%= datum.id %>-<%= todo.id %>" class="panel todo-item">
  <%= bootstrap_form_for([datum, todo], remote: true) do |f| %>
    <%= render 'shared/error_messages', object: f.object %>
    <%= f.hidden_field :done, value: false %>
    <%= f.text_field :task, hide_label: true, placeholder: 'task' %>
    <%= f.text_area :content, hide_label: true, placeholder: 'content' %>
    <%= f.submit 'Add', class: 'btn btn-primary btn-sm' %>
  <% end %>
</div>

app/views/todo_items/_todo.html.erb

<%= bootstrap_form_for([datum, todo], remote: true) do |f| %>
  <%= render 'shared/error_messages', object: f.object %>
  <%= f.check_box :done, hide_label: true %>
  <div><%= todo.task %></div>
  <div><%= todo.content %></div>
<% end %>

app/views/todo_items/new.js.erb（有效的响应）

$('.panel-body').append("<%= escape_javascript(render partial: 'form', locals: { datum: @datum, todo: @todo }) %>");

app/views/todo_items/create.js.erb（无效的响应）

$("#<%= @datum.id %>-<%= @todo.id %>").html("<%= escape_javascript(render partial: 'todo_items/todo', locals: { datum: @datum, todo: @todo }) %>");

有人可以帮我弄清楚我在这里做错了什么吗？我只打算respond_toformat.js。两种形式都包括remote: true。我觉得我在这里遗漏了一些非常愚蠢的东西，但我已经尝试了很长时间了。谢谢！如果我需要提供任何进一步的信息，请告诉我...

更新：

以下是我的服务器日志中出现的新请求和创建请求：

Started GET "/data/532799016a616b1786040000/todo_items/new" for 127.0.0.1 at 2014-03-20 16:05:04 -0600
Processing by TodoItemsController#new as JS
  Parameters: {"datum_id"=>"532799016a616b1786040000"}
  MOPED: 127.0.0.1:27017 COMMAND      database=admin command={:ismaster=>1} runtime: 0.4793ms
  MOPED: 127.0.0.1:27017 QUERY        database=datums_app_development collection=data selector={"_id"=>BSON::ObjectId('532799016a616b1786040000')} flags=[] limit=0 skip=0 batch_size=nil fields=nil runtime: 0.4106ms
  Rendered shared/_error_messages.html.erb (0.6ms)
  Rendered todo_items/_form.html.erb (8.8ms)
  Rendered todo_items/new.js.erb (14.3ms)
Completed 200 OK in 39ms (Views: 15.8ms | ActiveRecord: 0.0ms)


Started POST "/data/532799016a616b1786040000/todo_items" for 127.0.0.1 at 2014-03-20 16:05:11 -0600
Processing by TodoItemsController#create as HTML
  Parameters: {"utf8"=>"✓", "authenticity_token"=>"stsyxQfAuzPa1BGnOx2cAuagZqFuSHF6jfos9/euw94=", "todo_item"=>{"done"=>"false", "task"=>"Task", "content"=>"Content"}, "commit"=>"Add", "datum_id"=>"532799016a616b1786040000"}
  MOPED: 127.0.0.1:27017 QUERY        database=datums_app_development collection=data selector={"_id"=>BSON::ObjectId('532799016a616b1786040000')} flags=[] limit=0 skip=0 batch_size=nil fields=nil runtime: 0.5380ms
  MOPED: 127.0.0.1:27017 UPDATE       database=datums_app_development collection=data selector={"_id"=>BSON::ObjectId('532799016a616b1786040000')} update={"$push"=>{"todo_items"=>{"_id"=>BSON::ObjectId('532b66176a616b4160010000'), "task"=>"Task", "content"=>"Content", "done"=>false, "updated_at"=>2014-03-20 22:05:11 UTC, "created_at"=>2014-03-20 22:05:11 UTC}}} flags=[]
                         COMMAND      database=datums_app_development command={:getlasterror=>1, :w=>1} runtime: 1.1161ms
Completed 406 Not Acceptable in 8ms

ActionController::UnknownFormat - ActionController::UnknownFormat:
  actionpack (4.0.2) lib/action_controller/metal/mime_responds.rb:372:in `retrieve_collector_from_mimes'
  actionpack (4.0.2) lib/action_controller/metal/mime_responds.rb:189:in `respond_to'
  app/controllers/todo_items_controller.rb:13:in `create'
  actionpack (4.0.2) lib/action_controller/metal/implicit_render.rb:4:in `send_action'
  actionpack (4.0.2) lib/abstract_controller/base.rb:189:in `process_action'
  actionpack (4.0.2) lib/action_controller/metal/rendering.rb:10:in `process_action'
  actionpack (4.0.2) lib/abstract_controller/callbacks.rb:18:in `block in process_action'
  activesupport (4.0.2) lib/active_support/callbacks.rb:403:in `_run__1881092772621756057__process_action__callbacks'
  activesupport (4.0.2) lib/active_support/callbacks.rb:80:in `run_callbacks'
  actionpack (4.0.2) lib/abstract_controller/callbacks.rb:17:in `process_action'
  actionpack (4.0.2) lib/action_controller/metal/rescue.rb:29:in `process_action'
  actionpack (4.0.2) lib/action_controller/metal/instrumentation.rb:31:in `block in process_action'
  activesupport (4.0.2) lib/active_support/notifications.rb:159:in `block in instrument'
  activesupport (4.0.2) lib/active_support/notifications/instrumenter.rb:20:in `instrument'
  activesupport (4.0.2) lib/active_support/notifications.rb:159:in `instrument'
  actionpack (4.0.2) lib/action_controller/metal/instrumentation.rb:30:in `process_action'
  actionpack (4.0.2) lib/action_controller/metal/params_wrapper.rb:245:in `process_action'
  activerecord (4.0.2) lib/active_record/railties/controller_runtime.rb:18:in `process_action'
  actionpack (4.0.2) lib/abstract_controller/base.rb:136:in `process'
  actionpack (4.0.2) lib/abstract_controller/rendering.rb:44:in `process'
  actionpack (4.0.2) lib/action_controller/metal.rb:195:in `dispatch'
  actionpack (4.0.2) lib/action_controller/metal/rack_delegation.rb:13:in `dispatch'
  actionpack (4.0.2) lib/action_controller/metal.rb:231:in `block in action'
  actionpack (4.0.2) lib/action_dispatch/routing/route_set.rb:80:in `dispatch'
  actionpack (4.0.2) lib/action_dispatch/routing/route_set.rb:48:in `call'
  actionpack (4.0.2) lib/action_dispatch/journey/router.rb:71:in `block in call'
  actionpack (4.0.2) lib/action_dispatch/journey/router.rb:59:in `call'
  actionpack (4.0.2) lib/action_dispatch/routing/route_set.rb:680:in `call'
  rack (1.5.2) lib/rack/etag.rb:23:in `call'
  rack (1.5.2) lib/rack/conditionalget.rb:35:in `call'
  rack (1.5.2) lib/rack/head.rb:11:in `call'
  actionpack (4.0.2) lib/action_dispatch/middleware/params_parser.rb:27:in `call'
  actionpack (4.0.2) lib/action_dispatch/middleware/flash.rb:241:in `call'
  rack (1.5.2) lib/rack/session/abstract/id.rb:225:in `context'
  rack (1.5.2) lib/rack/session/abstract/id.rb:220:in `call'
  actionpack (4.0.2) lib/action_dispatch/middleware/cookies.rb:486:in `call'
  activerecord (4.0.2) lib/active_record/query_cache.rb:36:in `call'
  activerecord (4.0.2) lib/active_record/connection_adapters/abstract/connection_pool.rb:626:in `call'
  activerecord (4.0.2) lib/active_record/migration.rb:369:in `call'
  actionpack (4.0.2) lib/action_dispatch/middleware/callbacks.rb:29:in `block in call'
  activesupport (4.0.2) lib/active_support/callbacks.rb:373:in `_run__936815074203488114__call__callbacks'
  activesupport (4.0.2) lib/active_support/callbacks.rb:80:in `run_callbacks'
  actionpack (4.0.2) lib/action_dispatch/middleware/callbacks.rb:27:in `call'
  actionpack (4.0.2) lib/action_dispatch/middleware/reloader.rb:64:in `call'
  actionpack (4.0.2) lib/action_dispatch/middleware/remote_ip.rb:76:in `call'
  better_errors (1.0.1) lib/better_errors/middleware.rb:84:in `protected_app_call'
  better_errors (1.0.1) lib/better_errors/middleware.rb:79:in `better_errors_call'
  better_errors (1.0.1) lib/better_errors/middleware.rb:56:in `call'
  actionpack (4.0.2) lib/action_dispatch/middleware/debug_exceptions.rb:17:in `call'
  actionpack (4.0.2) lib/action_dispatch/middleware/show_exceptions.rb:30:in `call'
  railties (4.0.2) lib/rails/rack/logger.rb:38:in `call_app'
  railties (4.0.2) lib/rails/rack/logger.rb:20:in `block in call'
  activesupport (4.0.2) lib/active_support/tagged_logging.rb:67:in `block in tagged'
  activesupport (4.0.2) lib/active_support/tagged_logging.rb:25:in `tagged'
  activesupport (4.0.2) lib/active_support/tagged_logging.rb:67:in `tagged'
  railties (4.0.2) lib/rails/rack/logger.rb:20:in `call'
  actionpack (4.0.2) lib/action_dispatch/middleware/request_id.rb:21:in `call'
  rack (1.5.2) lib/rack/methodoverride.rb:21:in `call'
  rack (1.5.2) lib/rack/runtime.rb:17:in `call'
  activesupport (4.0.2) lib/active_support/cache/strategy/local_cache.rb:83:in `call'
  rack (1.5.2) lib/rack/lock.rb:17:in `call'
  actionpack (4.0.2) lib/action_dispatch/middleware/static.rb:64:in `call'
  rack (1.5.2) lib/rack/sendfile.rb:112:in `call'
  railties (4.0.2) lib/rails/engine.rb:511:in `call'
  railties (4.0.2) lib/rails/application.rb:97:in `call'
  rack (1.5.2) lib/rack/lock.rb:17:in `call'
  rack (1.5.2) lib/rack/content_length.rb:14:in `call'
  rack (1.5.2) lib/rack/handler/webrick.rb:60:in `service'
  /home/jake/.rbenv/versions/2.0.0-p247/lib/ruby/2.0.0/webrick/httpserver.rb:138:in `service'
  /home/jake/.rbenv/versions/2.0.0-p247/lib/ruby/2.0.0/webrick/httpserver.rb:94:in `run'
  /home/jake/.rbenv/versions/2.0.0-p247/lib/ruby/2.0.0/webrick/server.rb:295:in `block in start_thread'

【问题讨论】：

  • 你能分享你点击新表单上的添加按钮时生成的服务器日志吗？
  • @KirtiThorat，我已经添加了我的服务器日志。如您所见，出于某种原因，它期待 HTML 而不是 JS...
  • @KirtiThorat，服务器日志有帮助吗？我仍然对为什么在启动创建操作时出现Processing by TodoItemsController#create as HTML 感到非常困惑，因为我在控制器的respond_to 块中有一个format.js，在视图中有一个remote: true，还有一个data-remote="true"如果我使用 chrome 开发人员工具检查它，它会出现在 html 中。这是否与我试图在使用前一个 ajax 调用之后才存在的东西上使用 ajax 的事实有关？我是否需要刷新任何内容才能识别第二个 ajax 调用？谢谢
  • 好像表单不是通过 ajax 提交的。确保当您点击提交时会触发 ajax 请求。你可以通过 chrome 开发工具来完成。如果不是，那么您应该找出为什么 remote: true 在您的表单中不起作用。

标签： jquery ruby-on-rails ajax ruby-on-rails-4


【解决方案1】：

一个可能的错误与 dom 对象选择器有关。尝试：

$('#<%= @datum.id %>-<%= @todo.id %>').html("<%= escape_javascript(render partial: 'todo_items/todo', locals: { datum: @datum, todo: @todo }) %>");

使用jquery 选择器#id 而不是.class。由于您已将实例信息 (id="&lt;%= datum.id %&gt;-&lt;%= todo.id %&gt;") 添加到 id 属性：

<div id="<%= datum.id %>-<%= todo.id %>" class="panel todo-item">

查看 cmets 中链接的源代码后更新

您在form 中使用form，这是不正确的，浏览器不支持，它可能会导致不可预知的行为，就像您的情况一样。

您应该稍微改变一下您的方法/实施。在这种情况下，您可能需要使用 accepts_nested_attributes_for 和 fields_for。

Here a related RailsCast.

【讨论】：

  • 对不起，你能澄清一下错误是什么吗？我不能通过他们的 id 选择 dom 对象吗？
  • $('#foo')：通过 id 选择； $(".foo"): 通过类选择。我将通过一些澄清来编辑答案。
  • 你是对的，我没有正确的 ID 选择器。然而，这并没有帮助它识别data-remote="true" 属性并期望JS而不是HTML。
  • 好像没问题，能否提供一个示例应用来重现它？
  • 很多问题@JakeSmith，而且都与 OP 不同！我认为更好的解决方案是使用nested attributes，这是rails 中的自然方式。当然，您可以不使用它，只需从当前表单中添加第二个表单并在控制器中手动包装参数（或多或少就像您现在所做的那样）。如果您使用.create!，请记住，要创建多个资源，您应该发送和散列数组。无论如何，原始问题已解决，问题是由嵌套形式引起的，所以我认为应该接受答案。
【解决方案2】：

我认为 rail 的 remote: true 选项是“黑魔法”，我从不使用它——麻烦多于其价值。你的问题就是一个很好的例子。

如果我在你那里，我会使用常规 javascript 而不是使用那个特定的 rails 位。它更详细，但也更清晰，更易于调试。

不过，我无法为你编程。

祝你好运！

【讨论】：

    【解决方案3】：

    关键在这里 Processing by TodoItemsController#create as HTML。在您的创建操作中，您仅响应 js mime-type，但请求正在作为 html 处理。因此出现了未知的格式错误。要么将 format.html 添加到操作中，要么您可以通过将 format: :js 添加到表单来强制它成为 js mime 类型。

    【讨论】：

    • 我的意图是只处理 :js。我已经尝试将format: :js 添加到表单中，但这并没有改变我收到的错误消息。但是你能告诉我为什么我会放format: :js而不是remote: true吗？我为 form_for 助手输入了两个选项，但它仍然给我同样的错误消息。
    • 澄清一下，我尝试了format: :js 作为form_for 两种形式的独立选项。如果我将此选项放在第二种形式中，则在获取该错误方面我没有任何区别。但是，如果我将此选项放在第一个表单中，则在提交时，我的整个页面将替换为我的 create.js.erb 文件的原始 jQuery 内容。
    • 您还有其他想法吗？如果你读了我的问题，你就会明白我的意图。我尝试按照您的建议指定format: :js，您可以在我之前的评论中阅读结果。但是您似乎了解Rails的这一部分，所以我希望您能提供更多建议吗？谢谢！
    猜你喜欢
    • 1970-01-01
    • 2012-10-11
    • 2013-04-22
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2020-05-21
    • 2011-05-17
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode