jquery - 远程 : true option for form_for working for new action, 但不创建操作

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

更新:

这个问题已经解决了!这是一项困难的任务,因为调试起来根本不是一件容易的事。但在注意到我在表单标签内有一个表单标签时,我亲切的“回答者”指出,无论这是否是问题的根本原因,都需要解决这个问题。请记住,我同意他的观点,即嵌套属性绝对是解决这个问题的方法,但是因为这是一个学校项目,所以我选择将内部表单移到外面现在的外部形式让它达到我的预期。这涉及到更改您在下面看到的一些代码。但我不会发布新代码,因为我再次同意嵌套属性是在这种情况下的解决方法。当我有时间时,这将是我这个项目的下一个目标。

原始问题:

我正在使用 Rails 4,并且我有这样的嵌套资源:

resources :data do
  resources :todo_items
end

datum对象的编辑页面中,我希望用户能够将todo_item添加到datum对象通过 Ajax 。当您单击“添加待办事项”按钮时,将请求我用于创建新 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 %>
...

应用程序/ Controller /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("new"表单)

<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_to format.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'

最佳答案

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

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

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

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

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

您正在使用 form里面 form这是不正确的,浏览器不支持,并且可能会导致不可预测的行为,就像您的情况一样。

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

Here a related RailsCast .

关于jquery - 远程 : true option for form_for working for new action, 但不创建操作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22545354/

相关文章:

jQuery serializeArray() 在顶部添加另一个值以传递给 Ajax

javascript - 如何在客户端javascript中读取本地csv文件?

ruby-on-rails - 功能在生产模式下不起作用

jquery - 收集 Ajax 提交表单数据的简单函数

javascript - MDL - 页面加载时弹出 snackbar

javascript - 如何使用Jquery和Ajax将Json数据发送到数据库?

javascript - JQuery AJAX COR 错误

javascript - AJAX/jQuery 表单提交 shoutbox

ruby-on-rails - 如何将本地化的字符串日期转换为 Ruby 日期对象?

javascript - 当我重新启动服务器时,如何防止我的跟踪像素挂起其他人的网站