jquery - Adding fields dynamically in a nested model form in Rails 3

Question

I watched http://railscasts.com/episodes/73-complex-forms-part-1 and http://railscasts.com/episodes/74-complex-forms-part-2 but it didn't seem to work for me when trying the code - my assumption is a lot has changed within rails since then. The second issue is I'm using JQuery.

Does anyone know of any tutorials online that might show an easier way to do this? I've already made one nested model form - so its really just the adding/removing fields dynamically part thats killing me.

Answer 1

Here's a simple example that shows how to send out multiple invites from single page. Some little details are missing but it might be enough to help. You can add and remove fields from the view via some simple jQuery. This code could be adapted to any kind of nested model situation. Hope it helps! :)

InviteController.rb

class InviteController < ApplicationController
  def new
    @invites = Invite.new
  end

  def create
    @invites = User.new(params[:user]).invites
    if @user.update_attributes(params[:user])
      return redirect_to root_url, :notice => "Your invite(s) were successfully sent!"
    else
      render :action => :new
    end
  end
end

User.rb

class User < ActiveRecord::Base
  has_many :invites

  accepts_nested_attributes_for :invites
end

Invite.rb

class Invite < ActiveRecord::Base
  belongs_to :user
  after_create :send_invite

  private

  def send_invite
    # Send e-mail...
  end
end

new.html.erb

<% form_tag invites_path do %>
  <%= error_messages_for :object => @user.invites %>
  <ul id="invite-list">
    <%= render @invites %>
  </ul>
  <div>
    <%= submit_tag "Send Invite" %>
    <%= link_to "Add Another", "#add", :id => "add-another" %>
  </div>
<% end %>

_invite.html.erb

<%= fields_for "user[invites_attributes][]", invite do |i| %>
  <li>
    <%= link_to("Remove", "#delete", :class => "delete-invite") %>
    <%= i.label :full_name, "Full Name" %>
    <%= i.text_field :full_name %>
    <%= i.label :email, "Email Address" %>
    <%= i.text_field :email %>
  </li>
<% end %>

application.js

$(document).ready(function() {
  $('a#add-another').click(function() {
    $('#invite-list li:first').clone().find('input').val('')
    .end().appendTo('#invite-list');
  });

  $('.delete-invite').live('click', function() {
    if ($('#invite-list li').length > 1)
  $(this).parent().remove();
    else
  alert('You need at least one invite.')
  });
});