12

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.

Improve this question
2
  • If you're just using jQuery, then throw those fields into a div with a class, and when you click the button, find that element, and copy the html, then use after() to add another div with the copied html. Commented Jul 24, 2013 at 16:11
  • 2
    Just wanted to point out the fantastically awesome Cocoon that does all this with some extra options that take the pain out of this kind of work Commented Mar 18, 2017 at 21:16

1 Answer 1

Reset to default
28

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
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.