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