StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p><strong>The problem:</strong></p> <p>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. </p> <p><strong>The solution:</strong></p> <p>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. </p> <p>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. </p> <p>Note: I use rails 3.1 with JQuery and NO form builder or formstatic gems</p> <p><strong>The models</strong></p> <pre><code>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 </code></pre> <p>For <strong>the controllers</strong>, just create a regular restful format and just add to the <strong>countries_controller</strong> the following method</p> <pre><code>def update_city_select @cities = City.where( :country_id => params[:id]).order(:name) unless params[:id].blank? render :partial => "cities", :locals => { :cities => @cities } end </code></pre> <p>For the <strong>"Views/contacts/new.html.erb"</strong> you will need 2 things: to include a <strong>collection_select</strong> for the countries and <strong>to refer to a partial</strong> that will be placed as <strong>"views/countries/_cities.html.erb"</strong>. I also have a duplicate of the _cities partial within the contacts views.</p> <p>views/contacts/new.html.erb</p> <pre><code><%= 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 %> </code></pre> <p>views/countries/_cities.html.erb</p> <pre><code><%= 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 %> </code></pre> <p>Then create Ajax call in your <strong>application.js</strong> file</p> <pre><code>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; }); }) </code></pre> <p>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:</p> <pre><code>routes.rb resources :cities resources :countries resources :contacts do resources :countries end get '/countries/update_city_select/:id' => 'countries#update_city_select' </code></pre> <p>Thank you for the support Baldrick and volodymyr</p> <p>Aurelien</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload