Semergence

I just figured out how to handle collections of unsaved ActiveRecord objects in XHTML forms rendered by Ruby on Rails, so I thought I’d share with the hopes of making the next person’s search a bit quicker. Note: This post assumes you have Rails 1.2 and are generally following RESTful principles and are using `map.resources`. The main concepts work without `map.resources` but you’ll have to tweak some of the URLs.

The problem: You have a collection of unsaved (new) ActiveRecord objects that you would like to render fields for in the same form. For instance, you want to let a user enter multiple phone numbers before they initially save the User object and its collection of PhoneNumber instances.

Solution: Turns out, Rails makes this pretty easy (but of course) but the hard part is just figuring out how. We’ll assume you have a controller method that initializes the user and a phone number. We’ll start with a single phone number just to make things easy.

    def new
      @user = User.new(params[:user])
      @user.phone_numbers << PhoneNumber.new
    end

Let’s first create the partial for the phone number fields. We make a partial because there can potentially be multiple phone numbers for a user, so this will keep things DRY.

    <% fields_for 'phone_numbers[]', phone_number do |f| %>
<div class="form-field">
       <label for="phone_numbers_#{phone_number_counter}_area_code">Area Code:</label>
       <%= f.text_field :area_code, :index => phone_number_counter %></div>
<div class="form-field">
       <label for="phone_numbers_#{phone_number_counter}_number">Number:</label>
       <%= f.text_field :number, :index => phone_number_counter %></div>
<% end %>

Notice the ‘phone_number_counter’ variable? And the ‘:index’ symbol inside ‘f.text_field’? We’ll get to those in a moment, but they are key to making this whole thing work.

In your ‘new.rhtml’ file, you’ll need something like this:

    <% form_for :user, users_url do |f| %>
<div class="form-field">
        <label for="user_name">Name:</label>
        <%= f.text_field :name %></div>
<%= render :partial => ‘phone_number’, :collection => @user.phone_numbers %>
    <% end %>

If you’ve never seen `render :partial, :collection` before, go read up on it from the docs. It’s very handy.

The first time you render the page, you’ll see something like this (edited for clarity):

Name:

Area Code:

Number:

When you submit the form, your controller can handle the params as such:

# POST /users
    def create

      @user = User.create(params[:user])

      params[:phone_numbers].each_value do |phone_number_params|
    @user.phone_numbers << PhoneNumber.create(phone_number_params)

      end
    end

Summary: When create new instances of objects from a form in Ruby on Rails, use `render :partial, :collection` to easily loop through your collection, rendering the partial once for each item in the collection. Inside your partial, you will receive (for free!) a counter variable to let you know which iteration you are rendering. You can then use that counter as the unique identifier for your form fields. Once your objects are saved, though, they will have IDs and thus you won’t need to consult the counter for an identifier.

In fact, Rails makes that scenario drop dead easy. If your objects in your collection have IDs, then just leave out the `:index` symbol from your form field builders. Just by placing `[]` at the end of your form fields identifier (as we have above with `phone_numbers[]`) is enough to tell Rails to use the ID from the object when rendering. But again, if your objects are unsaved, you must specify `:index` as we have in the above example.

ps: Is there a better way to do this? Please, let me know!