Add fields dynamically as a nested model in Rails 3

I looked at 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 while trying to code - since then my assumption has changed a lot in rails. The second problem is that I am using jQuery.

Does anyone know of any online tutorials that might show an easier way to do this? I already made one nested model form - so actually just adding / removing fields dynamically partially kills me.

+8
jquery ruby-on-rails ruby-on-rails-3
source share
1 answer

Here is a simple example that shows how to send multiple invitations from one page. Some small details are missing, but this may be enough to help. You can add and remove fields from a view through simple jQuery. This code can be adapted to any situation of a nested model. 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.') }); }); 
+11
source share

All Articles