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.
PUNEET PANDEY's WEBLOG 