AJAX problem

Hello everyone :slight_smile:

I have this ajax issue, I'd be glad if someone would be willing to help, thanks :slight_smile:

What I try to do: Have a select box with a list of countries. When the country select box value is changed, have the state box appear. Up to this point, I got this successfully.

When the state box gets changed, have the city box appear for selection. This is what I couldn't acheive...

How I coded it: In my rhtml page I got this code:

<%= select "assoc", "country_id", @country_options, {:include_blank => true} %> <%= observe_field(:assoc_country_id,         :frequency => 0.5,         :update => :states,         :url => { :action => :show_states_select },         :with => "'country_id=' + value") %>

In show_states_select.rhtml, I got this: <%= select 'assoc', 'state_id', @state_options, {:include_blank => true} %> </td> <td> <div id="cities"></div>

<%= observe_field(:assoc_state_id,         :frequency => 0.5,         :update => :cities,         :url => { :action => :show_cities_select },         :with => "'state_id=' + value") %>

And show_cities_select.rhtml: <%= select 'user', 'city_id', @city_options, {:include_blank => true} %>

I think it does not appear because maybe the second observe_field comes from ajax request and maybe is not interpreted, I don't know, if someone could help me, I'd appreciate...

Thank you :slight_smile:

Come on, no idea for this ?

(My apologies if this gets double-posted - I sent it last night but haven't gotten any indication that it was received. It might be something weird with GMail, however)

why not have an   onChange="showState();" on the country list.

then in some JS have   function showState(){     // use CSS to show the box.     document.getElementById('user_city_id').style.display='block';   } to make it "appear"

and you can "hide" the city box by adding some JS at the bottom of the page.   // use CSS to hide the box.   document.getElementById('user_city_id').style.display='none'; This way if the user does not have JS turned on they will still see the city box.

John Ivanoff

Check out railscasts.com. Ryan Bates did an excellent cast on exactly this topic a few weeks ago (no. 88 - Dynamic Select Menus). Better than AJAX, since it is all processed client-side. (You'd also be able to use the caching methods, since your available options aren't going to change very often.)

Unless I misunderstand the problem, the issue is that he wants to dynamically populate the city and state selects based on the user's choices. Pick country A and you get a list of n States populated into the state select. Pick state B from the newly visible state select and you get m cities in that state populated into the newly visible city select.

@pierre -- I think that IE gets very cranky about executing JS that was not part of the original page. You may find that you need to compromise here. Create the selects and the observers and hide their containing divs. Your AJAX method can then either replace the previously empty select OR add the options to it (rather than rendering a new select with options and its observer). The return js would finish up by making the containing div visible.

HTH, AndyV