Dynamically add fields in rails with out nested attributes

Question

I am in the early stages of creating an app, and am just putting some basic code in place. Here is the current code...

app/views/cards/front.html.erb

<%= form_for(front_of_card_path) do |f| %> <%= f.fields_for :competency_templates do |builder| %> <%= render 'add_fields', f: builder %> <% end %> <%= link_to_add_fields "Add New Tag", f, :skill %> <% end %> 

routes

 controller :cards do get '/front', action: 'front', as: 'front_of_card' post '/save', action: 'create', as: 'save_card' get '/my_contact_info', action: 'back', as: 'back_of_card' put '/save', action: 'update', as: 'save_card' get '/my_card', action: 'show', as: 'card' end 

controller

 def create @skill= Skill.new(params[:skill]) @tag = Tag.new(params[:tag]) @tag.save @skill.tag_id = @tag.id @skill.save redirect_to front_of_card_path, notice: 'Skill was successfully created.' #get user/session #save skills & tags end 

cards.js.coffee

jQuery -> $('form').on 'click', '.remove_fields', (event) -> $(this).prev('input[type=hidden]').val('1') $(this).closest('fieldset').hide() event.preventDefault() $('form').on 'click', '.add_fields', (event) -> time = new Date().getTime() regexp = new RegExp($(this).data('id'), 'g') $(this).before($(this).data('fields').replace(regexp, time)) event.preventDefault() 

app_helper

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 

So right now this code gives me two text fields. One for the a tag name and another for a tag weight, and the controller inserts everything in the DB. I would like use some javascript to dynamically add as many of these tag/weight fields as I like. Everything I've found seems to focus on nested attributes. Any ideas appreciated.

Update

Added more code to flesh this out. The issue I am having is the 3rd variable I am passing in on this line...

 <%= link_to_add_fields "Add New Tag", f, :skill %> 

It does not like ':skill', but I am not sure what I should be passing here.

Answer 1

So here is what I came up with...here are my two models...

class Skill < ActiveRecord::Base belongs_to :tag attr_accessible :tag_id, :weight end class Tag < ActiveRecord::Base has_many :skills attr_accessible :name end 

I'm calling a partial from app/views/skills/_form.html.erb and using a js tag to add new fields. Also note that I am re-rendering the partial, then hiding it in the last div tag.

 <div id="skillSet"> <%= render partial: "skills_form" %> </div> <a href="javascript:;" id="addNewTag">Add New Tag</a> <div class="actions"> <%= f.submit %> </div> <% end %> <div class="hide" id="new_skills_form"> <%= render partial: "skills_form", locals: {skill: false} %> </div> 

The partial is pretty simple. All I am doing here is storing the values in an array...

<div class="skillsForm"> <%= label_tag 'tag' %> <%= text_field_tag 'tags[]' %> <%= label_tag 'weight' %> <%= text_field_tag 'weights[]' %> </div> 

...here is the javascript...real straight forward, just say when #addNewTag is clicked, appeand #new_skills_form to #skillSet

$(document).ready(function(){ $("#addNewTag").click(function(){ $("#skillSet").append($("#new_skills_form").html()); }); }); 

...and finally the controller action decontructs the arrays, and saves them...

def create @skill = Skill.new(params[:skill]) tags = params[:tags] weights = params[:weights] tags.each_with_index do |tag, index| tag = Tag.create :name => tag Skill.create :tag_id => tag.id, :weight => weights[index] end end