Forum: Ruby on Rails Drop-down list populating second drop-down via AJAX

Announcement (2017-05-07): is now read-only since I unfortunately do not have the time to support and maintain the forum any more. Please see and for other Rails- und Ruby-related community platforms.
dba (Guest)
on 2005-11-22 05:45
(Received via mailing list)
Hi! The documentation is sparse, and my searches have turned up nothing
yet.  Perhaps someone has some insight? Is there a how-to on this? or
what am I missing? :-)

I have a web page with a <select> drop-down list (high-level key like
Company) that once chosen, should populate another <div> item with a
list of matching low-order keys (like Product).  I have coded something,
but it does not trigger the download of the second HTML snippet with the
new select. (nothing in http log, javascript console, etc)

1) layout has <%= javascript_include_tag "prototype" %>

2) controller (call) has

   def index
     @clients = Client.find(:all, :order=>"name")

   def load_contacts
     # I need to get the selected client to here as well! params[?]
     @contacts = ClientContacts.find :all, :order =>"name"
     render :layout=>false

3) inital view has

   Client: <%=
   options = [[" Select Client", " "]] +
      @clients.collect {|c|[,]}
   select( "call", "client_id", options)	%>

   Contacts: <%=
   observe_field "call[client_id]", #:call_contact_id,
		:update => :client_contact_id_div,
		:url => {:action=>:load_contacts } %>
   <div id="client_contact_id_div"><select></select></div>

4) view for load_contacts is
   <%= options = [[" Select Contact", " "]]
   + @contacts.collect {|c|[,]}
   select( "call", "client_contact_id", options) %>

5) Versions:
   Prototype 1.3.1
   Firefox 1.0.7 under Linux
fernand (Guest)
on 2005-11-22 06:53
(Received via mailing list)
I had to implement similar behavior and got stuck just like you did. I
implement a solution that is less than optimal but it works. Perhaps
someone out
there has a better solution.

The way I have solved this is in your ajax callback from the first combo
spew out the select html for the second based on the observer pattern.
Thus when
the user changes the selection on combo1 you can define a div in the
page which content will populated using the html block returned by the

In you callback you 'compute' something like that:

render_text "<select id='combo2> <option1...> <option2...>...</select>"

This makes it harder to style and maintain... But it does get the job

Hope this helps...
bogdan.ionescu (Guest)
on 2005-11-22 16:01
(Received via mailing list)
The first parameter of observer_field should be the id and not the name
the select
So in your case it would have to be:
observe_field 'call_client_id'

allen (Guest)
on 2005-11-22 17:50
(Received via mailing list)
Thanks, Bogdan! That did the trick. I was trying different names, but I
had not thought about the tag id.

Also I needed to get the value selected from the first drop-down box to
build the data for the second.  Here is what I determined I needed for
the controller to populate the second box.

def load_contacts
   client_id = request.raw_post
   @contacts = ClientContact.find :all, :order =>"privilege desc,name",
   render :layout=>false
This topic is locked and can not be replied to.