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

Announcement (2017-05-07): www.ruby-forum.com is now read-only since I unfortunately do not have the time to support and maintain the forum any more. Please see rubyonrails.org/community and ruby-lang.org/en/community for other Rails- und Ruby-related community platforms.
651882d2bae9535f7070abae7813c587?d=identicon&s=25 JC (Guest)
on 2006-03-30 01:05
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
<assuming Portable Electronincs selected above the result maybe>

Digital Camera
MP3 Player
etc..

3. Upon select of Subcatagory (above) Make select list is updated
<assuming MP3 player selected>
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:
<p><%= select 'tag', 'catagory_id', @catagory_list, {:selected => 13 }
%></p>

<p>
<div id="subcatagory_container">
	<%= select 'tag', 'subcatagory_id', { :Subcatagory => 'disabled' } %>
</div>
</p>

<p>
<div id="make_container">
	<%= select 'tag', 'make_id', { :Make => 'disabled' } %>
</div>
</p>

<%= 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)") %>
651882d2bae9535f7070abae7813c587?d=identicon&s=25 JC (Guest)
on 2006-03-30 01:10
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.
651882d2bae9535f7070abae7813c587?d=identicon&s=25 JC (Guest)
on 2006-03-30 02:26
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?
Ad7805c9fcc1f13efc6ed11251a6c4d2?d=identicon&s=25 Alex Young (Guest)
on 2006-03-30 11:22
(Received via mailing list)
JC wrote:
>
The docs that I use are here:

http://www.sergiopereira.com/articles/prototype.js.html
9d1f5d2d9de70bd9a934f557dc95a406?d=identicon&s=25 Daniel ----- (liquid)
on 2006-03-30 11:34
(Received via mailing list)
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
This topic is locked and can not be replied to.