javascript - Rails - nested form won't display in edit template -

i created form allows user dynamically add nested form fields clicking either text or url button. permutation of text or url fields can added (they can removed).

example - http://imgur.com/4ldneem

when form submitted, content displayed in view template. however, when go edit post @ /posts/id/edit, post content not appear in edit template - it's blank page.

sql log http://i.stack.imgur.com/b2ueq.png

post model

class post < activerecord::base  has_many :things, dependent: :destroy  accepts_nested_attributes_for :things end  

thing model

class thing < activerecord::base  belongs_to :post end  

schema

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

posts controller

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

new.html.erb

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

edit.html.erb

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

posts.coffee

remove field

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

add field (new template)

 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) 

add field (edit template)

     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) 

change

f.fields_for :thing 

to:

f.fields_for :things 

as it's has_many association.

edit: saw forms don't have fields rendered serverside. adding fields required though, rails show created association(s):

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

and other's suggested: use existing solution adding associations via js. tricky. try out nested_form_fields gem: https://github.com/ncri/nested_form_fields

i don't know cocoon, seems solution too.