Bits of Code - Nested Attributes

Yesterday I had the need to implement a form with some nested attributes and so I did what I often do: I went back to a previous project and copy&pasted the necessary code and then changed it to match the new project's needs.

While I was doing this I thought that it would be useful to get this, and other bits of code in a place that I can easily refer to, instead of having to remember in which project I've used what. This is the reasoning behind this post.

Bare in mind that this is not a post about life changing bits of code, but rather bits of code that I need now and then and that are easier to just copy&paste&edit than to have to rewrite from scratch. Some of these bits can be easily found in different websites, but having them here will make my life easier than having to search again. I'll make sure I'll refer to the websites that I've used.

So these first bits of code are meant to build a form with nested attributes.

Imagine that you have a model named Content that has many Attachments and when you are adding or editing a content, you want to be able to manage that content's attachments. This allows you to easily do it.

This code uses Rails accepts_nested_attributes_for and then it manages the different attachments with javascript methods (using jQuery framework), allowing you to add, remove and edit them accordingly.

The Content model:

	class Content < ActiveRecord::Base
	has_many :attachments
	accepts_nested_attributes_for :attachments, :allow_destroy => true
	end

view raw content.rb hosted with ❤ by GitHub

The Attachment model (notice the accepts_nested_attributes_for method):

	class Attachment < ActiveRecord::Base
	belongs_to :content
	end

view raw attachment.rb hosted with ❤ by GitHub

The ApplicationHelper, with the methods used in the views:

	module ApplicationHelper
	def link_to_remove_fields(name, f)
	f.hidden_field(:_destroy) + link_to_function(name, "remove_fields(this)", :class => "btn remove danger")
	end
	def link_to_add_fields(name, f, association)
	new_object = f.object.class.reflect_on_association(association).klass.new
	fields = f.fields_for(association, new_object, :child_index => "new_#{association}") do |builder|
	render(association.to_s.singularize + "_fields", :f => builder)
	end
	link_to_function(name, "add_fields(this, '#{association}', '#{escape_javascript(fields)}')", :class => "btn")
	end
	end

view raw application_helper.rb hosted with ❤ by GitHub

Part of the Content form view (notice the use of the method fields_for, and the helper method link_to_add_fields):

	<!-- other form code -->
	<div class="attachments">
	<%= f.fields_for :attachments do |attachment_form| %>
	<%= render 'attachment_fields', :f => attachment_form %>
	<% end %>
	</div>
	<%= link_to_add_fields "Attach a file or an image", f, :attachments %><br />
	<!-- other form code -->

view raw _form.html.erb hosted with ❤ by GitHub

The attachment_fields partial (notice the use of the helper method link_to_remove_field):

	<div class="attachment fields">
	<%= f.label :caption %>
	<%= f.file_field :document %>
	<%= link_to_remove_fields "remove", f %>
	</div>

view raw _attachment_fields.html.erb hosted with ❤ by GitHub

And the javascript methods (notice that if the position of the elements in the attachment_fields partial changes this code might need to be updated):

	function remove_fields(link) {
	$(link).prev("input[type=hidden]").val("1");
	$(link).closest(".fields").hide();
	}
	function add_fields(link, association, content) {
	var new_id = new Date().getTime();
	var regexp = new RegExp("new_" + association, "g")
	$("div.attachments").append(content.replace(regexp, new_id));
	}

view raw application.js hosted with ❤ by GitHub

 These bits of code are based on (or were copied from):

• Railscasts Nested Model Form - Part 1
• Railscasts Nested Model Form - Part 2
• Ryan's Scraps - What's new in Edge Rails - Nested Object Forms