Ruby on Rails Auto Select

Hello Guys,

Once Again I m back with My another Useful Article for You. In this Article I will describe you, how to auto select more than two select box. So, are U Ready??

Update: If you wish to implement the same functionality using Rails 3, Jquery and Rails3-UJS, please follow: Jquery on Rails 3 Autoselect.

Here is the Task that U have to achieve :-

You have three Select Boxes one for States, second for city and third for college.

What You want to Do :-

You want that if Some one selects State for Example :- Karnataka, the next drop down will automatically show u the lists of cities that comes Under Karnataka, Furthermore if you select Say Bangalore, the third drop down will show You the lists of colleges that comes under that city.

In short:-

STATE -> CITY -> COLLEGE

KARNATAKA -> BANGALORE -> IIT,Bangalore

Ruby on Rails with Ajax makes it very easy to achieve, It’s a 5 Step Process, Let’s See How

Step 1: create a new application, I am naming my application here ‘sample’

Go to konsole/command Prompt:

:    rails sample

This will create particular set of directories and files. Go into that Application

:    cd /sample

Make a Model ‘State’

:    ruby script/generate model State

This will create some files into your application, now open your migration file in your editor

i.e    fever/db/migrate/001_create_states.rb

Type

:    t.column :state, :string

and then save it.

open the model i.e state.rb in some editor

i.e    fever/app/model/state.rb

Type

:    has_many :cities

save this also, now Run

:    rake db:migrate

This will migrate your states table in your database. To save your time I am generating scaffold here, go to konsole/command prompt and type

:    ruby script/generate scaffold State

Note: this will create controller named states_controller.rb in your app/controllers directory.

Your first step is done, now we will proceed on 2nd step.

Step 2: create another model with the name city, for that type :

:    ruby script/generate model City

This will create some files into your application, now open your second migration file in your editor

i.e    fever/db/migrate/002_create_cities.rb

Type

:    t.column :city, :string

t.column :state_id, :integer

save it.

open the model i.e city.rb in some editor

i.e    fever/app/model/city.rb

Type

:    belongs_to :state

has_many :colleges

save this and run

:    rake db:migrate

This will migrate your cities table in your database. Create scaffold of this, Type

:    ruby script/generate scaffold City

Note: this will create another controller named cities_controller.rb in your app/controllers directory.

Your Second step is done, now we will proceed on 3rd step.

Step 3: Create third model with the name college, for that type :

:    ruby script/generate model College

This will create some files into your application, now open your Third migration file in your editor

i.e    fever/db/migrate/003_create_colleges.rb

Type

:    t.column :college, :string

t.column :city_id, :integer

save it.

open the model i.e college.rb in some editor

i.e    fever/app/model/college.rb

Type

:    belongs_to :city

save this and run

:    rake db:migrate

This will migrate your colleges table in your database. Create scaffold of this, Type

:    ruby script/generate scaffold College

Note: this will create another controller named colleges_controller.rb in your app/controllers directory.

You have done with your 3rd Step. Now we will move onto our fourth step

Step4: Create a Third Model with name = User, where we will display all the action, for that type :

:    ruby script/generate model User

This will create some files into your application, now open your Fourth migration file in your editor

i.e    fever/db/migrate/004_create_users.rb

Type

:    t.column :firstname, :string

t.column :lastname, :integer

save it(I think two fields are more than enough to solve my purpose here).

Create a scaffold of this model

:    ruby script/generate scaffold User

Note: that’s it. You have done with your basics steps, now we will use Ajax here, but before that I want you to insert some values of states, cities and colleges manually, be sure that you are giving right ‘state_id’, and ‘city_id’ in your corresponding ‘cities’ and ‘colleges’ tables

Step 5: Open app/views/users/new.rhtml

and type below line between your head section

:    <HEAD>

<%= javascript_include_tag “prototype” %>

</HEAD>

Open app/views/users/_form.rhtml, and type the below code after your firstname and lastname fields

:    <p>State <br />

<% @states = State.find(:all) %>

<select name=”state_id” id=”state_id”>

<option value=””>Select City</option>

<% @states.each do |state| %>

<option value=”<%= state.id %>”>

<%= state.state %>

</option>

<% end %>

</select>

</p>

<p>City

<div id=”city_id_container”>

<select name=”city_id” disabled=”disabled”>

<option value=””>No City</option>

</select>

</div>

<%= observe_field(“state_id”, :frequency => 0.25, :update => “city_id_container”, :url => { :action => :add_link_city }, :with => “‘state_id=’+value”) %>

</p>

Now open your users controller i.e app/controllers/users_controller.rb, and write the code as shown below

: def add_link_city

@cities = City.find_all_by_state_id(params[“state_id”])

end

Now create a new file in app/views/users/add_link_city.rhtml, and add the code as shown

: <HTML>

<HEAD>

<%= javascript_include_tag “prototype” %>

</HEAD>

<BODY>

<p>    <% @html = “<select id=’city_id’ name=’city_id’>” %>

<%= @html += “<option value=”>No City</option>” %>

<% @cities.each do |@cities| %>

<%= @html = “<option value=’#{@cities.id}’>#{@cities.city}</option>” %>

<% end %>

<%= @html = “</select>” %>

</p>

<p>College

<div id=”college_id_container”>

<select name=”college_id” disabled=”disabled”>

<option value=””>No College</option>

</select>

</div>

<%= observe_field(“city_id”, :frequency => 0.25, :update => “college_id_container”, :url => { :action => :add_link_college }, :with => “‘city_id=’+value”) %></p>

</BODY>

</HTML>

Go back again in your app/controllers/users_controller.rb, and add the method as shown below

: def add_link_college

@colleges = College.find_all_by_city_id(params[“city_id”])

#@cities = City.find(:first, :conditions => [“city = ?”, params[:city_id]])

end

Now create a new file in app/views/users/add_link_college and add the following code

: <HTML>

<HEAD>

<%= javascript_include_tag “prototype” %>

</HEAD>

<BODY>

<p>    <% @html = “<select id=’college_id’ name=’college_id’>” %>

<%= @html += “<option value=”>No College</option>” %>

<% @colleges.each do |@colleges| %>

<%= @html = “<option value=’#{@colleges.id}’>#{@colleges.college}    </option>” %>

<% end %>

<%= @html = “</select>” %>

</p>

<p> If Your College is not on the List, Please Click <%= link_to     “Here”, :controller => ‘colleges’, :action => ‘new’, :id =>

@colleges.city_id %> here to Add Your College</p>

<p>Course

<div id=”course_id_container”>

<select name=”course_id” disabled=”disabled”>

<option value=””>No Course</option>

</select>

</div>

<%= observe_field(“college_id”, :frequency => 0.25, :update =>

“course_id_container”, :url => { :action => :add_link_course },

:with => “‘college_id=’+value”) %></p>

</BODY>

</HTML>

That’s It, You have done. Now you can check this in Your Browser. Type in Your url, http://localhost:3000/users/new, and see the magick.

Waiting for Your Valuable Responses.

Advertisements