This package extends rails with some helpers that allow “selects that update dynamically depending on other fields”
Demo application can be found in github.com/splendeo/dependent_select
Mailing list on groups.google.com/group/dependent_select/
On your layout:
<%= javascript_include_tag :defaults %> <%= dependent_select_includes %>
On your new/edit views:
<% form_for :store do |f| %> Country:<br/> <% f.collection_select :country_id, @countries, :id, :name, :include_blanks => true %> <br /> Province:<br/> <% f.dependent_collection_select :province_id, @provinces, :id, :name, :country_id, :include_blanks => true %> <br /> City:<br/> <% f.dependent_collection_select :city_id, @cities, :id, :name, :province_id, :include_blanks => true %> <br /> <% end %>
In order for this to work properly, the Store model must have methods for country_id and store_id. The best way I’ve found for implementing this is by using delegate. So the model would be:
class Store < ActiveRecord::Base belongs_to :city, :include => [{:province => :country}] #useful to preload these delegate :country, :country_id, :country_id=, :to =>:city delegate :province, :province_id, :province_id=, :to =>:city end
Notice that I’ve delegated the country to the city - so the city should probably have another delegate line:
class City < ActiveRecord::Base belongs_to :province, :include => [:country] #again, useful but not needed delegate :country, :country_id, :country_id=, :to =>:province end
Finally, the controller might look like this:
class StoresController < ApplicationController
before_filter :fill_selects :only => [:new, :edit, :update, :create]
{...} # Standard scaffold-generated methods
protected
def fill_selects
@countries = Country.find(:all, :order => 'name ASC')
@provinces = Province.find(:all, :order => 'name ASC') # all provinces for all countries
@cities = City.find(:all, :order => 'name ASC') # all cities for all provinces
end
end
This will generate a regular collection_select for the country and a dependent_collection_select for province. The later will be a regular collection_select followed by a js +<script>+ tag that:
-
Will create an array with all the provinces. (+var array=[province1, province2…];+)
-
Will place a listeners on the
country_idselectin order to update the provinces select if the countries select is modified -
Fill up the provinces select with appropiate values.
*Note that this will not work if you haven’t followed the installation procedure - see below*
There’s a more complex example at the end of this document.
Copy this on config/environment.erb, inside the gems section
config.gem "dependent_select"
Then execute
rake gems:install
The first time you initialize your server after this (presumably with script/server) the necesary javascript files and css will be copied to the public/ directory.
I actually haven’t tried this, sorry I don’t know how to do it.
Several steps are needed:
-
It is recommended that you uninstall the gem before installing a new version.
-
You must remove this file: public/javascripts/dependent_select/dependent_select.js
-
And then install the new version
In other words:
sudo gem uninstall dependent_select rm public/javascripts/dependent_select/dependent_select.js rake gems:install
I haven’t looked into that yet.
No AJAX for now, sorry. Just plain old javascript.
However, it might interest you that you’ll be generating this:
<script> var whatever = [['opt1',1,1],['opt2',2,1],['opt3',3,1]...]; </script>
Instead of this :
<option value='1'>opt1</option> <option value='2'>opt2</option> <option value='3'>opt3</option>
In our tests, generating information for 8000 cities took arond 20k - the size of a small image.
Make the test and then decide. It will not take you more than 10 minutes.
On this case we have an employee model with 2 relationships with cities. So the employee model might look like the one below. Notice that the delegates get a bit more complicated.
class Employee < ActiveRecord::Base belongs_to :home_city, :class_name => "City", :include => [{:province => :country}] delegate :country, :country_id, :country_id=, :to =>:home_city, :allow_nil => true, :prefix => :home delegate :province, :province_id, :province_id=, :to =>:home_city, :allow_nil => true, :prefix => :home belongs_to :work_city, :class_name => "City", :include => [{:province => :country}] delegate :country, :country_id, :country_id=, :to =>:work_city, :allow_nil => true, :prefix => :work delegate :province, :province_id, :province_id=, :to =>:work_city, :allow_nil => true, :prefix => :home end
On your layout:
<%= javascript_include_tag :defaults %> <%= dependent_select_includes %>
On your new/edit views, the “filter” for provinces isn’t :country_id any more, but :home_country_id or :work_country_id. The same happens with the cities and the provinces. You have to tell the selects where to find the right filter fields, using the filter_field option.
<% form_for :employee do |f| %>
Home Country:<br/>
<% f.collection_select :home_country_id, @countries, :id, :name, :include_blanks => true %> <br />
Home Province:<br/>
<% f.dependent_collection_select :home_province_id, @provinces, :id, :name, :country_id,
:filter_field => :home_country_id,
:include_blanks => true %> <br />
Home City:<br/>
<% f.dependent_collection_select :home_city_id, @cities, :id, :name, :city_id,
:filter_field => :home_province_id,
:include_blanks => true %> <br />
Work Country:<br/>
<% f.collection_select :work_country_id, @countries, :id, :name, :include_blanks => true %> <br />
Work Province:<br/>
<% f.dependent_collection_select :work_province_id, @provinces, :id, :name, :country_id,
:filter_field => :work_country_id,
:include_blanks => true %> <br />
Work City:<br/>
<% f.dependent_collection_select :work_city_id, @cities, :id, :name, :city_id,
:filter_field => :work_province_id,
:include_blanks => true %> <br />
<% end %>
On your controller:
class EmployeesController < ApplicationController
before_filter :fill_selects :only => [:new, :edit, :update, :create]
{...} # Standard scaffold-generated methods
protected
def fill_selects
@countries = Country.find(:all, :order => 'name ASC')
@provinces = Province.find(:all, :order => 'name ASC') # all provinces for all countries
@cities = City.find(:all, :order => 'name ASC') # all cities for all provinces
end
end