边栏 - 嵌套表单不会显示在编辑模板中

Rails - nested form won't display in edit template

本文关键字：编辑 显示 嵌套 表单 边栏      更新时间：2023-09-26

>我创建了一个表单，允许用户通过单击"文本"或"Url"按钮来动态添加嵌套的表单域。可以添加文本或 Url 字段的任何排列（也可以删除它们）。

示例 - http://imgur.com/4ldNEem

提交表单后，内容将显示在视图模板中。但是，当我在/posts/id/edit 上编辑帖子时，帖子内容不会出现在编辑模板中 - 这是一个空白页面。

SQL 日志 https://i.stack.imgur.com/B2ueq.png

帖子模型 

class Post < ActiveRecord::Base
 has_many :things, dependent: :destroy
 accepts_nested_attributes_for :things
end

事物模型

class Thing < ActiveRecord::Base
 belongs_to :post
end

图式

create_table "posts", force: :cascade do |t|
 t.datetime "created_at", null: false
 t.datetime "updated_at", null: false
end
create_table "things", force: :cascade do |t|
 t.text     "text"
 t.string   "url"
 t.integer  "post_id"
end

帖子控制器

class PostsController < ApplicationController
def edit
 @post = Post.includes(:things).find(params[:id])
end 
def update
end

新.html.erb

<button id='addtext'>text</button>
<button id='addurl'>url</button>
<%= form_for @post, url: posts_path, html: { multipart: true } do |f| %>
 <%= f.fields_for :thing do |ff| %>
 <% end %> 
 <%= f.submit %>
<% end %>

编辑.html.erb

<button id='addtext'>text</button>
<button id='addurl'>url</button>
<%= form_for @post, url: posts_path, html: { multipart: true } do |f| %>
 <%= f.fields_for :thing do |ff| %>
 <% end %> 
 <%= f.submit %>
<% end %>

帖子.咖啡

删除字段

jQuery ->
 $('form').on 'click', '.remove_fields', (event) ->
 $(this).prev('input[type=hidden]').val('1')
 $(this).closest('div').remove()
 event.preventDefault()

添加字段（新模板） 

 current_index = 0
addText = ->
 html = """
  <div>
  <textarea placeholder="Write something..." name="post[things_attributes][#{current_index}][text]" id="post_things_attributes_#{current_index}_text"></textarea>
  <input type="hidden" name="post[things_attributes][#{current_index}][order]" id="post_things_attributes_#{current_index}_order" value="#{current_index}" />
  <input type="hidden" name="post[thing_attributes][#{current_index}][_destroy]" id="post_things_attributes_#{current_index}__destroy" value="#current_index" />
  <a class="remove_fields" href="#">x</a>
  </div>
 """
 $("#new_post input[type='submit']").before(html)
 current_index += 1
$ ->
  $('#addtext').on('click', addText)

  current_index = 0
addUrl = ->
 html = """
  <div>
  <input placeholder="http://www..." type="url" name="post[things_attributes][#{current_index}][url]" id="post_things_attributes_#{current_index}_url">
  <input type="hidden" name="post[things_attributes][#{current_index}][order]" id="post_things_attributes_#{current_index}_order" value="#{current_index}" />
  <input type="hidden" name="post[thing_attributes][#{current_index}][_destroy]" id="post_things_attributes_#{current_index}__destroy" value="#current_index" />
  <a class="remove_fields" href="#">x</a>
   </div>
   """
  $("#new_post input[type='submit']").before(html)
   current_index += 1
$ ->
  $('#addurl').on('click', addUrl)

添加字段（编辑模板） 

     current_index = 0
editText = ->
 html = """
  <div>
  <textarea placeholder="Write something..." name="post[things_attributes][#{current_index}][text]" id="post_things_attributes_#{current_index}_text"></textarea>
  <input type="hidden" name="post[things_attributes][#{current_index}][order]" id="post_things_attributes_#{current_index}_order" value="#{current_index}" />
  <input type="hidden" name="post[thing_attributes][#{current_index}][_destroy]" id="post_things_attributes_#{current_index}__destroy" value="#current_index" />
  <a class="remove_fields" href="#">x</a>
  </div>
 """
 $(".edit_post input[type='submit']").before(html)
 current_index += 1
$ ->
  $('#edittext').on('click', editText)

editUrl = ->
 html = """
  <div>
  <input placeholder="http://www..." type="url" name="post[things_attributes][#{current_index}][url]" id="post_things_attributes_#{current_index}_url">
  <input type="hidden" name="post[things_attributes][#{current_index}][order]" id="post_things_attributes_#{current_index}_order" value="#{current_index}" />
  <input type="hidden" name="post[thing_attributes][#{current_index}][_destroy]" id="post_things_attributes_#{current_index}__destroy" value="#current_index" />
  <a class="remove_fields" href="#">x</a>
  </div>
 """
  $(".edit_post input[type='submit']").before(html)
  current_index += 1
 $ ->
  $('#editurl').on('click', editUrl)

更改

f.fields_for :thing

自：

f.fields_for :things

因为它是一个has_many协会。

编辑：我也刚刚看到您的表单在服务器端没有任何字段。但是，需要添加这些字段，以便 rails 显示您创建的关联：

<%= f.fields_for :things do |ff| %>
  <%= ff.text_field :url %>
  <%= ff.text_area :text %>
<% end %>

正如其他人所建议的那样：使用现有解决方案通过JS添加关联。这很棘手。试试我的nested_form_fields宝石：https://github.com/ncri/nested_form_fields

我不知道茧，但这似乎也是一个很好的解决方案。

需要检查的几件事：

让 Rails 处理您的路线

在new.html.erb和edit.html.erb中，从form_for中删除url键，让 Rails 找出正确的路线：

<%= form_for @post, html: { multipart: true } do |f| %>    
  <%= f.fields_for :thing do |ff| %>
  <% end %> 
  <%= f.submit %>
<% end %>

更好的是，将此通用代码放入部分_form.html.erb：

# app/views/posts/_form.html.erb
<%= form_for @post, html: { multipart: true } do |f| %>    
  <%= f.fields_for :thing do |ff| %>
  <% end %> 
  <%= f.submit %>
<% end %>
# app/views/posts/new.html.erb | app/views/posts/edit.html.erb
<button id="addtext">Text</button
<button id="addurl">URL</button
<%= render 'form' %>

检查日志

您什么也没看到的事实表明存在错误。日志中是否还显示其他内容？

$ tail -f log/development.log

另外，请务必检查是否有任何JavaScript错误（例如，在Chrome中，打开检查器工具并查找红叉。如果有，请单击它以打开控制台并列出任何错误。

检查缩进

我注意到的（但它可能只是粘贴到 SO 编辑器中）是您在第 1 行 （ current_index = 0） 的缩进在添加字段（编辑模板）和添加字段（新模板）文件上都消失了。CoffeeScript 使用严格的缩进规则：

#    current_index = 0 # <- Your code has extra indentation here
current_index = 0
editText = ->
  html = """
  <div>
   # ...

使用茧

否则，如上面的评论所述，一定要使用茧宝石为自己节省很多样板 JS/CS。我还会simple_form添加到超级有用的工具列表中。

相关文章：