带有Rails 3.1和Ajax的Dynamic Dropdown的错误404（Jquery）

Question

I am having trouble on creating dynamic dropdowns where:

When you select a country, it renders the partial with cities that belong to a country.

I have the models Country has_many cities and City belongs_to Country

With firebug I get an Error when fetching the controller action update_city_select, where it selects a Contact record instead of Country record.

I followed the example from Peter Mac

Here is my code:

application.js

jQuery(function($) {
// when the #region_id field changes
  $("#contact_country_id").live('change', function() {
    // make a POST call and replace the content
    var country = $('select#contact_country_id :selected').val();
    if(country == "") country="0";
    jQuery.get('/contacts/update_city_select/' + country, function(data){
        $("#cities").html(data);
    })
    return false;
  });
})

contacts_controller.rb

  def new
    @contact = Contact.new
    @industries = Industry.all
    @countries = Country.all
    @cities = City.where(["country_id = ?", 1]).all
    respond_to do |format|
      format.html # new.html.erb
      format.json { render json: @contact }
    end
  end
.
.
.
  def update_city_select
      @cities = City.where(:country_id => params[:id]).order(:name) unless params[:id].blank?
      render :partial => "cities", :locals => { :cities => @cities }
  end

contacts/_form.html.erb

<%= form_for(@contact) do |f| %>
...
    <div class="field">
        <%= f.label :country %>
        <%= f.collection_select :country_id, @countries, :id, :name, :prompt => "-- Select a country --" %>
    </div>
    <div id="cities" class="field">
        <%= render 'cities' %>
    </div>
...
<% end %>

contacts/_cities.html.erb

<%= fields_for @contact do |f| %>
    <%= f.label :city %>
    <% unless cities.blank? %>
        <%= f.collection_select :city_id, cities, :id, :name, :prompt => "-- Select a city --" %>
    <% else %>
        <%= f.select "city_id","city_id", :prompt => "-- Select a city --" %>
    <% end %>

<% end %>

routes.rb

  resources :cities
  resources :countries
  resources :contacts
  get '/contacts/update_city_select/:id' => 'contacts#update_city_select'

You're help on solving this Ajax problem would be most appreciated!

Aurelien

Answer 1

The problem:

From the tutorial as mentioned above, I thought I had to have the method "update_city_select" in the Contacts controller. The routing then thought it should fetch an item from the Contact records instead of a Country record.

The solution:

The solution for displaying the Ajax correctly me was 1) to nest countries resources, 2) move the method to the countries controller, 3) create a partial "_cities.html.erb" in the countries views, 4) slightly modify the form and the JS.

I posted below the entire code for those who might run into similar problems or need an answer on how to have the dynamic select work.

Note: I use rails 3.1 with JQuery and NO form builder or formstatic gems

The models

class Contact < ActiveRecord::Base
  belongs_to :city
  belongs_to :country

  attr_accessible :name, :country_id, :city_id
end

class Country < ActiveRecord::Base
  has_many :cities, :dependent => :destroy
  has_many :contacts
  attr_accessible :name, :city_id
end

class City < ActiveRecord::Base
  has_many :contacts
  belongs_to :country
  attr_accessible :name, :country_id
end

For the controllers , just create a regular restful format and just add to the countries_controller the following method

def update_city_select
    @cities = City.where( :country_id => params[:id]).order(:name) unless params[:id].blank?
    render :partial => "cities", :locals => { :cities => @cities }
end

For the "Views/contacts/new.html.erb" you will need 2 things: to include a collection_select for the countries and to refer to a partial that will be placed as "views/countries/_cities.html.erb" . I also have a duplicate of the _cities partial within the contacts views.

views/contacts/new.html.erb

<%= form_for(@contact) do |f| %>
    <div class="field">
        <%= f.label :country %>
        <%= f.collection_select :country_id, @countries, :id, :name, :prompt => "-- Select a country --" %>
    </div>
    <div id="cities" class="field">
        <%= render 'cities' %>
    </div>
<% end %>

views/countries/_cities.html.erb

<%= label_tag :city %>
<% unless @cities.blank? %>
    <%= collection_select(:contact, :city_id, @cities, :id, :name, :prompt => true )%>
<% else %>
    <%= select_tag "city_id","city_id", :prompt => "-- Select a city --" %>
<% end %>

Then create Ajax call in your application.js file

jQuery(function($) {
// when the #region_id field changes
  $("#contact_country_id").live('change', function() {
    // make a POST call and replace the content
    var country = $('select#contact_country_id :selected').val();
    if(country == "") country="0";
    jQuery.get('/countries/update_city_select/' + country, function(data){
        $("#cities").html(data);
    })
    return false;
  });
})

The final cycle is to make sure you can access the Countries resources from Contact form. In order to do so, you just need to nest your Countries resources within the Contact resources. You will also need to make Get request call for your update_city_select as so:

routes.rb
resources :cities
resources :countries
resources :contacts do
  resources :countries
end

get '/countries/update_city_select/:id' => 'countries#update_city_select'

Thank you for the support Baldrick and volodymyr

Aurelien