Dynamic Select Lists with Ruby on Rails and AJAX

An article by Steve Bobrowski    3 Comments

I use Ruby on Rails in many of my cloud computing consulting engagements. Having come from a DBA/system administrator background, I most often struggle with user interface things like AJAX and CSS. This blog post is about one of the most recent UI challenges I overcame: how to create two related select lists such that when the user selects an item in one list the UI dynamically updates the other select list. I didn’t like any of the other tutorials I found much, so I rolled my own. I hope this post is helpful to others.

The Setup

For this tutorial, the example schema will be three simple tables: people, countries, and states. The goal is to make the New/Edit Person form work so that when the user selects a Country from the select list, the States list automatically updates to list states that are only in that country.

Requirements

To complete the steps in this tutorial, I’m using:

• Ruby 1.8.6
• Rails 2.3.5
• The Haml gem.
• Ryan Bates’ nifty generators.’
• SQLite database.

Get Started

To create the app:

rails dynalists
cd dynalists

config.gem "haml"

script/generate nifty_layout --haml

Scaffolding

Now create the three simple tables for the tutorial with the nifty_scaffold generator:

script/generate nifty_scaffold country name:string --haml
script/generate nifty_scaffold state name:string country_id:integer --haml
script/generate nifty_scaffold person name:string country_id:integer state_id:integer --haml

rake db:create
rake db:migrate

Models

Edit your three model files to add some associations. They should end up as follows:

app/model/country.rb

class Country < ActiveRecord::Base
 attr_accessible :name
 has_many :states
 has_many :people
end

app/model/state.rb

class State < ActiveRecord::Base
 attr_accessible :name, :country_id
 belongs_to :country
 has_many :people
end

app/model/person.rb

class Person < ActiveRecord::Base
 attr_accessible :name, :country_id, :state_id
 belongs_to :country
 belongs_to :state
end

View Modifications

The first version of our views require just a few simple modifications that address the associations between the models. In the form partials, add some select lists for the associations, and in the index and show views, display the names of states and countries where appropriate (rather than IDs). Altogether, the edits are minimal and should take you only a couple of minutes to complete. When you are done, the following views should match these listings. (All of my views use Haml, so be careful with your indentations.)

app/views/states/_form.html.haml

- form_for @state do |f|

 = f.error_messages
 %p
  = f.label :name
  %br
  = f.text_field :name
 %p
  = f.label :name
  %br
  = f.collection_select :country_id, @countries, :id, :name
 %p
  = f.submit "Submit"

app/views/states/index.html.haml

- title "States"

%table
 %tr
  %th Name
  %th Country
 - for state in @states
 %tr
  %td= h state.name
  %td= h state.country.name
  %td= link_to 'Show', state
  %td= link_to 'Edit', edit_state_path(state)
  %td= link_to 'Destroy', state, :confirm => 'Are you sure?', :method => :delete
%p= link_to "New State", new_state_path

app/views/states/show.html.haml

- title "State"


%p

 %strong Name:
 =h @state.name
%p
 %strong Country:
 =h @state.country.name

%p
 = link_to "Edit", edit_state_path(@state)
 |
 = link_to "Destroy", @state, :confirm => 'Are you sure?', :method => :delete
 |
 = link_to "View All", states_path

app/views/people/_form.html.haml

- form_for @person do |f|
 = f.error_messages
 %p
  = f.label :name
  %br
  = f.text_field :name
 %p
  = f.label :country
  %br
  = f.collection_select :country_id, @countries, :id, :name, :prompt => "-- Select a country --"
 %p
  = f.label :state
  %br
  = f.collection_select :state_id, @states, :id, :name, :prompt => "-- Select a state --"
 %p
  = f.submit "Submit"

app/views/people/index.html.haml

- title "People"

%table
 %tr
  %th Name
  %th Country
  %th State
 - for person in @people
 %tr
  %td= h person.name
  %td= h person.country.name
  %td= h person.state.name
  %td= link_to 'Show', person
  %td= link_to 'Edit', edit_person_path(person)
  %td= link_to 'Destroy', person, :confirm => 'Are you sure?', :method => :delete

%p= link_to "New Person", new_person_path

app/views/people/show.html.haml

- title "Person"

%p
 %strong Name:
  =h @person.name
%p
 %strong Country:
 =h @person.country.name
%p
 %strong State:
 =h @person.state.name

%p
 = link_to "Edit", edit_person_path(@person)
 |
 = link_to "Destroy", @person, :confirm => 'Are you sure?', :method => :delete
 |
 = link_to "View All", people_path

Controller Modifications

The new select lists in the state and person form partials reference objects that don’t exist with the existing controllers. To deal with this, edit the following controller/actions so that they provide the necessary data.

app/controllers/states_controller.rb

new action

def new
 @state = State.new
 @countries = Country.all
end

edit action

def edit
 @state = State.find(params[:id])
 @countries = Country.all
end

app/controllers/people_controller.rb

new action

def new
 @person = Person.new
 @countries = Country.all
 @states = State.all
end

edit action

def edit
 @person = Person.find(params[:id])
 @countries = Country.all
 @states = State.all
end

Add Some Lookup Data

Fire up the server.

script/server start

• United States
• Canada

and states for the United States:

• North Carolina
• Florida

and states for Canada:

• Quebec
• Ontario

The country and state forms should appear as follows:

A new country.