Databases
StackOverflow2013
Postsdbo
PONested Model Forms - Railscast #196 revised - Adding fields via jQuery not working
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PONested Model Forms - Railscast #196 revised - Adding fields via jQuery not working
    text
    copied!<p>I was following the <a href="http://railscasts.com/episodes/196-nested-model-form-revised" rel="nofollow noreferrer">Railscast #196 revised</a> and everything went basically fine, but I am not able to add new fields to the nested form. The "remove fields" function works nicely, but after click on "link_to_add_fields", the browser jumps to the top of the page, and no new field appears.</p> <p>There are already a ton of questions to this railscast, like <a href="https://stackoverflow.com/questions/9085866/railscast-197-how-to-function-add-fields">here</a> or <a href="https://stackoverflow.com/questions/6505267/problems-adding-fields-in-nested-form-through-jquery-form-railscasts-episode">here</a>, and I tried to read all of them, but most of them are referring to the original casts from 2010. I am stuck for hours now, and I can't figure out, where my problem is. Sorry, if its a rookie mistake, I am quite new to rails. Any help would be really appreciated!</p> <p>I was following the #196 revised version, using Rails 3.2.13, Ruby 1.9.3</p> <p>models/post.rb</p> <pre><code>class Post &lt; ActiveRecord::Base attr_accessible :content, :title, :image, :postfiles_attributes has_many :postfiles, :dependent =&gt; :destroy accepts_nested_attributes_for :postfiles, allow_destroy: true end </code></pre> <p>models/postfile.rb</p> <pre><code>class Postfile &lt; ActiveRecord::Base attr_accessible :dropbox, :gdrive, :post_id belongs_to :post end </code></pre> <p>views/posts/_form.html.erb</p> <pre><code>&lt;%= simple_form_for @post do |f| %&gt; &lt;%= f.fields_for :postfiles do |builder| %&gt; &lt;%= render 'postfile_fields', f: builder %&gt; &lt;% end %&gt; &lt;%= link_to_add_fields "Add File", f, :postfiles %&gt; &lt;% end %&gt; </code></pre> <p>views/posts/_postfile_fields.html.erb</p> <pre><code>&lt;fieldset&gt; &lt;%= f.text_field :dropbox %&gt; &lt;%= f.hidden_field :_destroy %&gt; &lt;%= link_to "remove", '#', class: "remove_fields" %&gt; &lt;/fieldset&gt; </code></pre> <p>postfiles.js.coffee</p> <pre><code>jQuery -&gt; $('form').on 'click', '.remove_fields', (event) -&gt; $(this).prev('input[type=hidden]').val('1') $(this).closest('fieldset').hide() event.preventDefault() $('form').on 'click', '.add_fields', (event) -&gt; time = new Date().getTime() regexp = new RegExp($(this).data('id'), 'g') $(this).before($(this).data('fields').replace(regexp, time)) event.preventDefault() </code></pre> <p>application_helper.rb</p> <pre><code>module ApplicationHelper def link_to_add_fields(name, f, association) new_object = f.object.send(association).klass.new id = new_object.object_id fields = f.fields_for(association, new_object, child_index: id) do |builder| render(association.to_s.singularize + "_fields", f: builder) end link_to(name, '#', class: "add_fields", data: {id: id, fields: fields.gsub("\n", "")}) end end </code></pre> <p>Upfront, thank you so much for your help!</p> <p>UPDATE: I am using simple-form. See the _form file above. Could this be an issue?</p> <p>UPDATE II:</p> <p>I get an Javascript error, not sure if this could be an issue for the problem here: Chrome calls it "Uncaught SyntaxError: Unexpected reserved word " and Firebug calls it "SyntaxError: unterminated string literal". The error points to this js code part:</p> <pre><code>loadData: function(data){ this.$editor.addClass('st-block__editor'); this.$editor.html(" &lt;div class='st-block__inner'&gt; &lt;div class='media'&gt; &lt;a class='pull-left' &gt; &lt;img class='media-object link-pic' src='" + data.thumbnail_url + "'&gt; &lt;/a&gt; &lt;div class='media-body'&gt; &lt;div class='link-source'&gt;" + data.provider_name + "&lt;/div&gt; &lt;div class='link-title'&gt; &lt;a href='#'&gt;" + data.title + "&lt;/a&gt;&lt;/div&gt; &lt;div class='link-description'&gt;" + data.description + "&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; "); }, </code></pre> <p>UPDATE 3:</p> <p>Could the posts controller be part of the issue?</p> <p>This is my posts_controller.rb</p> <pre><code>def new @post = current_user.posts.new @post.postfiles.build respond_to do |format| format.html # new.html.erb format.json { render json: @post } end end </code></pre> <p>Thanks again for all your help!</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload