HELP: Rails / Ajax with 3 Drop down lists (see code)


#1

Hi All,
I have successfully implemented a two tier drop down lost with rails.
However I’m stumped on how to make a third tier. For example: The form
has three select lists; Catagory, Subcatagory and Make

User Experience Desired:

  1. On page load a Catagory Select List shows a list of Catagories from
    the database. example:
    Portable Electronincs
    Laptops
    etc.

  2. Upon select of Catagory (above) subcatagory select list is updated

Digital Camera
MP3 Player
etc…

  1. Upon select of Subcatagory (above) Make select list is updated

    Apple
    Creative labs
    Sony
    etc.

I have Catagories and Subcatagories complete using an observer (see
below.) However I cannot get a second observer to trigger on the
subcatagory selection. Is it a DOM issue? Is the Subcatagory select list
once filled identified by some other name?

-JC

The code thus far:

THE CONTROLLER

def lookup_subcats
@subcatagories =
Subcatagory.find_all_by_catagory_id(@params[:catagory_id]).collect
{|subc| [subc.subcatagory, subc.id]}
render :inline => “<%= select ‘tag’, ‘subcatagory_id’,
@subcatagories, {:selected => @subcat_count } %>”
end

def lookup_makes
@subcat = (@params[:subcatagory_id])
@makes = @subcat.makes.find_all_by_make_id.collect {|m| [m.make,
m.id]}
render :inline => “<%= select ‘tag’, ‘make_id’, @makes, {:prompt =>
true } %>”
end

THE FORM:

<%= select 'tag', 'catagory_id', @catagory_list, {:selected => 13 } %>

<%= select 'tag', 'subcatagory_id', { :Subcatagory => 'disabled' } %>

<%= select 'tag', 'make_id', { :Make => 'disabled' } %>

<%= observe_field(
:tag_catagory_id,
:update => :subcatagory_container,
:url => { :action => :lookup_subcats },
:with => “‘catagory_id=’+escape(value)”) %>

<%= observe_field(
:tag_subcatagory_id,
:update => :make_container,
:url => { :action => :lookup_makes },
:with => “‘subcatagory_id=’+escape(value)”) %>


#2

Additional note for those looking at the code…(and other curious
newbie like me)
The relationship between subcatagories and makes is many-to-many. This
is because HP or Canon for example is a make that can be found in many
subcatagories.


#3

JC wrote:

Additional note for those looking at the code…(and other curious
newbie like me)
The relationship between subcatagories and makes is many-to-many. This
is because HP or Canon for example is a make that can be found in many
subcatagories.

Is there a DOM browser or doc I can read on Prototype?


#4

JC wrote:

The docs that I use are here:

http://www.sergiopereira.com/articles/prototype.js.html


#5

I tried to implement something similar but I found that it doesnt work
in IE
at all.

IE does not support writing the innerHTML to a select box, so any ajax
call
to populate a select box does not do anything.

If you come up with a way to overcome this I would be interested.

Cheers