dependent drop downs

12 views
Skip to first unread message

Dark Ambient

unread,
Sep 7, 2006, 6:12:42 AM9/7/06
to rubyonrails-talk
I asked about this before but perhaps didn't state clearly what it was
I wanted.
I have a select box and based on the user's choice a second select
would be populated that relates to the choice made in the first box.
I've googled around and found little on dependent drop downs for
rails. Kind of surprises me since I'd think it would be a more
common function. Can anyone point me in the direction ?

TIA
Stuart

Clare

unread,
Sep 7, 2006, 6:57:57 AM9/7/06
to rubyonra...@googlegroups.com
Just search back on this forum, there have been about 4 or 5 posts and
replies about this in in the past couple of weeks. I posted one of the
replies so its deffinitely there.
regards
c

--
Posted via http://www.ruby-forum.com/.

Dark Ambient

unread,
Sep 7, 2006, 8:36:45 AM9/7/06
to rubyonra...@googlegroups.com
Alright, I found the thread. It probably makes sense for me at this
point to get familiar with Ajax, rjs and all in Rails, before
attempting.

Stuart

Dark Ambient

unread,
Sep 7, 2006, 9:16:45 AM9/7/06
to rubyonra...@googlegroups.com
As I'm reading through the AJAX stuff (in AWDWR) I'm wondering about a
few things
If I have this one element in my form where when user picks option
from another element is loaded - is this more of a javascript coding ,
like "onclick" or something that could be done with what's available
within Rails.
One idea is I'm having is to have that section of my form as a partial
that will get triggered in the controller to update. This make sense
?

Stuart

Peter De Berdt

unread,
Sep 7, 2006, 10:01:31 AM9/7/06
to rubyonra...@googlegroups.com

On 07 Sep 2006, at 15:16, Dark Ambient wrote:

As I'm reading through the AJAX stuff (in AWDWR) I'm wondering about a

few things

If I have this one element in my form where when user picks option

from another element is loaded - is this more of a javascript coding ,

like "onclick" or something that could be done with what's available

within Rails.

One idea is I'm having is to have that section of my form as a partial

that will get triggered in the controller to update.  This make sense

?


It's quite easy do that with the prototype helpers. Just use an observe of some element that calls a method in your controller, which in its turn will update a div on your page with a partial. Or you could look at the UJS plugin, I found it most useful as your view is a lot cleaner than when using the built-in methods.


Best regards


Peter De Berdt


Nathan Leach

unread,
Sep 7, 2006, 10:19:09 AM9/7/06
to rubyonra...@googlegroups.com
I think you will want to read up on observers. In your initial view, create your 1st drop-down and an observer that watches that field. When a value is chosen in the drop-down, the observer will call a method in your controller (which in turn calls a partial view) and renders the 2nd drop down.

-----Original Message-----
From: rubyonra...@googlegroups.com
[mailto:rubyonra...@googlegroups.com]On Behalf Of Dark Ambient
Sent: Thursday, September 07, 2006 8:17 AM
To: rubyonra...@googlegroups.com
Subject: [Rails] Re: dependent drop downs

As I'm reading through the AJAX stuff (in AWDWR) I'm wondering about a
few things
If I have this one element in my form where when user picks option
from another element is loaded - is this more of a javascript coding ,
like "onclick" or something that could be done with what's available
within Rails.
One idea is I'm having is to have that section of my form as a partial
that will get triggered in the controller to update. This make sense
?

Stuart

Dark Ambient

unread,
Sep 7, 2006, 10:33:10 AM9/7/06
to rubyonra...@googlegroups.com
Cool guys, appreciate all the input! I'll let you know when it's done :)

Stuart

gaurav bagga

unread,
Sep 7, 2006, 10:42:18 AM9/7/06
to rubyonra...@googlegroups.com
<%= error_messages_for 'infotantra' %>

<!--[form:infotantra]-->

<p>Category<br>

  <select name="infotantra[category_id]">
  <option value=0>Select Category</option>
   <% @category.each do |category| %>
       <option value="<%= category.id %>"
         <%= ' selected' if category.id == @infotantra.category_id %>>
         <%= category.category %>
       </option>
   <% end %>
  </select></p>
 
  <p>Sub-Category<br>
  <div id="sub_category">
     <select name="infotantra[sub_category_id]" disabled="disabled">
           <option value=0>Select Sub-Category</option>
     </select>
  </div></p>
<p><label for="infotantra_description">Description</label><br/>
<%= text_area 'infotantra', 'description'  , :rows=>"6"%></p>


<%= observe_field("infotantra[sub_category_id] ",
   :frequency => 0.25,
   :update => " sub_category",
   :url => { :action => :update_sub_category },#controller responsibility to do stuff
   :with => "'category_id='+value") %>#value for the action to use and compute stuff

 
<!--[eoform:infotantra]-->

in controller you might do.......................



def update_sub_category
  
      @sub_category = SubCategory.find(:all,:conditions => [" category_id = ?" ,     @params["category_id "]])#the value you sent
        @html = "<select name='infotantra[sub_category_id]' >"
       @html += "<option value='0'>Sub-Category</option>"
  
        @sub_category.each do |sub_category|
          @html += "<option value='#{sub_category.id}'>#{sub_category.sub_category}</option>"
        end
      
       @html += "</select>"
      
   render(:layout => false)
 end   




hope this helps a little it worked for me
also hoping indentation remains the way it was

gaurav bagga

unread,
Sep 7, 2006, 11:03:41 AM9/7/06
to rubyonra...@googlegroups.com
i made a mistake
my apologies

please correct

<%= observe_field("infotantra[category_id]",
   :frequency => 0.25 ,

   :update => "sub_category",
   :url => { :action => :update_sub_category },
   :with => "'category_id='+value") %>
  <%end%>


please see the red field

regards
gaurav v bagga

Peter De Berdt

unread,
Sep 7, 2006, 11:29:25 AM9/7/06
to rubyonra...@googlegroups.com

On 07 Sep 2006, at 16:42, gaurav bagga wrote:

<%= observe_field("infotantra[sub_category_id] ",
   :frequency => 0.25,
   :update => " sub_category",
   :url => { :action => :update_sub_category },#controller responsibility to do stuff
   :with => "'category_id='+value") %>#value for the action to use and compute stuff

If you leave out the frequency, the method is called when the field changes (onChange event), it's of no real use to use frequency here. Also, if you want to do more than just update one dropdown, you can leave out the :update part too and then use an rjs template or render :update in your controller.

Dark Ambient

unread,
Sep 7, 2006, 11:58:10 AM9/7/06
to rubyonra...@googlegroups.com
Question about 'frequency', does that not require any time of click or
submit, but works on the machine clock to check the field?

Stuart

Dark Ambient

unread,
Sep 7, 2006, 12:14:42 PM9/7/06
to rubyonra...@googlegroups.com
On 9/7/06, gaurav bagga <gaurav....@gmail.com> wrote:

> <select name="infotantra[category_id]">
> <option value=0>Select Category</option>
> <% @category.each do |category| %>
> <option value="<%= category.id %>"
> <%= ' selected' if category.id == @infotantra.category_id %>>
> <%= category.category %>
> </option>
> <% end %>
> </select></p>
>

Little confused here , sorry.
What is "infotantra" ?
For the first list I have something like this:

<select id="wage_id" name="wage[id]">
<option value="0">Please Select</option>
<option value="1">Hourly</option>
<option value="2">Annual</option>
</select>

Since it's only 2 options I just have it written out as opposed to a table.

Stuart

gaurav bagga

unread,
Sep 7, 2006, 12:44:36 PM9/7/06
to rubyonra...@googlegroups.com
hi,
regarding frequency Peter is right you dont need it....

with frequency 
it will check the field for a changed state at set intervals

infotantra is my table same as wage (in your case its not as you mentioned...)

regards
gaurav v bagga

Dark Ambient

unread,
Sep 7, 2006, 2:03:21 PM9/7/06
to rubyonra...@googlegroups.com
Really sorry here because I'm getting an error just setting this up.
So maybe this shouldn't even go in this thread but I've already taken
too much bandwidth probably.

Right now I'm getting a no method error on a nil object.
I have two tables, pays and wages. (pays is the one they would choose
to decide on what is presented in the wages select)

I have both models set up.
class Pay < ActiveRecord::Base
has_many :wages
end

class Wage < ActiveRecord::Base
belongs_to :pay
end


Here is my first select -

<select name="pay[wage_id]">
<option value=0>Select Type</option>
<% @wage.each do |wage| %>
<option value="<%= wage.id %>"
<%= ' selected' if wage.id == @pay.wage_id %>>
<%= wage.wage %>


</option>
<% end %>
</select></p>

Anyone see anything wrong.
The pays table is id and name
The wages table is id hran and name
the hran column is really the id that should match the id in pays.

Stuart


On 9/7/06, gaurav bagga <gaurav....@gmail.com> wrote:

Nathan Leach

unread,
Sep 7, 2006, 2:19:46 PM9/7/06
to rubyonra...@googlegroups.com
Make sure you're filling @wages in the controller. Also, look into "collection_select", similar to the following, to replace your code in the view

<%= collection_select :pay, :wage_id, @wages, :id, :wage %>

HTH,
Nathan

-----Original Message-----
From: rubyonra...@googlegroups.com
[mailto:rubyonra...@googlegroups.com]On Behalf Of Dark Ambient
Sent: Thursday, September 07, 2006 1:03 PM
To: rubyonra...@googlegroups.com
Subject: [Rails] Re: dependent drop downs

Dark Ambient

unread,
Sep 7, 2006, 4:25:27 PM9/7/06
to rubyonra...@googlegroups.com
It looks like Gaurav's code has a join on the tables.
i.e. <select name="infotantra[category_id]">
Probably not necessary, if I grab the id chosen and stick it into an
instance variable.Then do and if / else.

Stuart
On 9/7/06, Nathan Leach <nathan...@phifer.com> wrote:
>

_Kevin

unread,
Sep 8, 2006, 12:29:16 AM9/8/06
to Ruby on Rails: Talk
> --Apple-Mail-8--1052860537
> Content-Type: text/html; charset=ISO-8859-1
> Content-Transfer-Encoding: quoted-printable
> X-Google-AttachSize: 3232
>
> <HTML><BODY style=3D"word-wrap: break-word; -khtml-nbsp-mode: space; =
> -khtml-line-break: after-white-space; "><BR><DIV><DIV>On 07 Sep 2006, at =
> 16:42, gaurav bagga wrote:</DIV><BR =
> class=3D"Apple-interchange-newline"><BLOCKQUOTE type=3D"cite"><SPAN =
> class=3D"Apple-style-span" style=3D"border-collapse: separate; =
> border-spacing: 0px 0px; color: rgb(0, 0, 0); font-family: Helvetica; =
> font-size: 12px; font-style: normal; font-variant: normal; font-weight: =
> normal; letter-spacing: normal; line-height: normal; text-align: auto; =
> -khtml-text-decorations-in-effect: none; text-indent: 0px; =
> -apple-text-size-adjust: auto; text-transform: none; orphans: 2; =
> white-space: normal; widows: 2; word-spacing: 0px; "><SPAN =
> style=3D"font-weight: bold;"><SPAN class=3D"Apple-style-span" =
> style=3D"font-weight: bold; ">&lt;%=3D observe_field("</SPAN><SPAN =
> style=3D"background-color: rgb(255, 102, 102);; font-weight: bold; =
> "><SPAN class=3D"Apple-style-span" style=3D"font-weight: bold; =
> ">infotantra[sub_category_id] </SPAN></SPAN><SPAN =
> class=3D"Apple-style-span" style=3D"font-weight: bold; =
> ">",</SPAN></SPAN><BR style=3D"font-weight: bold;"><SPAN =
> style=3D"font-weight: bold;"><SPAN class=3D"Apple-style-span" =
> style=3D"font-weight: bold; ">=A0=A0 :frequency =3D&gt; =
> 0.25,</SPAN></SPAN><BR style=3D"font-weight: bold;"><SPAN =
> style=3D"font-weight: bold;"><SPAN class=3D"Apple-style-span" =
> style=3D"font-weight: bold; ">=A0=A0 :update =3D&gt; "</SPAN><SPAN =
> style=3D"background-color: rgb(255, 153, 255);; font-weight: bold; =
> "><SPAN class=3D"Apple-style-span" style=3D"font-weight: bold; "> =
> sub_category</SPAN></SPAN><SPAN class=3D"Apple-style-span" =
> style=3D"font-weight: bold; ">",</SPAN></SPAN><BR style=3D"font-weight: =
> bold;"><SPAN style=3D"font-weight: bold;"><SPAN class=3D"Apple-style-span"=
> style=3D"font-weight: bold; ">=A0=A0 :url =3D&gt; { :action =3D&gt; =
> :update_sub_category },#controller responsibility to do =
> stuff</SPAN></SPAN><BR style=3D"font-weight: bold;"><SPAN =
> style=3D"font-weight: bold;"><SPAN class=3D"Apple-style-span" =
> style=3D"font-weight: bold; ">=A0=A0 :with =3D&gt; </SPAN><SPAN =
> style=3D"background-color: rgb(51, 204, 0);; font-weight: bold; "><SPAN =
> class=3D"Apple-style-span" style=3D"font-weight: bold; =
> ">"'category_id=3D'+value"</SPAN></SPAN><SPAN class=3D"Apple-style-span" =
> style=3D"font-weight: bold; ">) %&gt;#value for the action to use and =
> compute stuff</SPAN></SPAN></SPAN></BLOCKQUOTE></DIV><BR><DIV>If you =
> leave out the frequency, the method is called when the field changes =
> (onChange event), it's of no real use to use frequency here. Also, if =
> you want to do more than just update one dropdown, you can leave out the =
> :update part too and then use an rjs template or render :update in your =
> controller.</DIV><BR><BR><DIV> <P style=3D"margin: 0.0px 0.0px 0.0px =
> 0.0px"><FONT face=3D"Helvetica" size=3D"3" style=3D"font: 12.0px =
> Helvetica">Best regards</FONT></P> <P style=3D"margin: 0.0px 0.0px 0.0px =
> 0.0px; font: 12.0px Helvetica; min-height: 14.0px"><BR></P> <P =
> style=3D"margin: 0.0px 0.0px 0.0px 0.0px"><FONT face=3D"Helvetica" =
> size=3D"3" style=3D"font: 12.0px Helvetica">Peter De Berdt</FONT></P> =
> </DIV><BR></BODY></HTML>=
>
> --Apple-Mail-8--1052860537--

Yet another solution...

http://www.sciwerks.com/blog/2006/07/07/updating-select-controls-with-ajax/

_Kevin
www.sciwerks.com

Dark Ambient

unread,
Sep 8, 2006, 6:02:15 AM9/8/06
to rubyonra...@googlegroups.com
Still a bit confused over what tables , whether it is one table, or
multiple and joined.
When you say infotantra[category_id] is this a join ? Meaning is
infotantra one table and category_id from another table ? Or
category_id is just a column/method from class infotantra ?

The way my table is set up is like this:
first table:
id name
1 hourly
2 annual
So here I've written out the select:

<%= @pays = Pay.find(:all, :order => "id").map { |p| [p.name, p.id] }
select(:pay, :name, @pays)%>


Then as an example (i'm not going to dump the entire table here, but
this is the second table:
id hran name
1 1 5.00
2 1 10.00
3 2 20,000
4 2 50,000

<div id="dollar">
<%= @wages = Wage.find(:all, :order => "id").map { |w| [w.name, w.id] }
select(:wage, :name, @wages, {}, {:disabled => true}) %></div>

Now the observer_field :

<%= observe_field([:pay.id],
:frequency => 0.10,
:update => "dollar",
:url => {:action => :update_dollar},
:with => "'pay.id='+value") %>

(I left the frequency in for now as there is no form_tag on the page
nor a submit button)
dollar is the DOM element. So far though I haven't written the
controller code and not sure how to. I'm still a newb (if you haven't
noticed) but I would be inclined to just do something like

if pay.id == 1
...code to make observer update field
else pay.id == 2

Sorry, if none of this makes sense.

Stuart


On 9/7/06, gaurav bagga <gaurav....@gmail.com> wrote:

gaurav bagga

unread,
Sep 8, 2006, 6:30:16 AM9/8/06
to rubyonra...@googlegroups.com
hi,

it aint that it does not makes sense thing is that
i myself i am new so i cannot say much

you are trying thats the best part

keep going on you will definately get through
i also banged my head to get it right

in my case also it wasnt that i got it in first try

regards
gaurav v bagga

Dark Ambient

unread,
Sep 8, 2006, 7:07:47 AM9/8/06
to rubyonra...@googlegroups.com, kevin....@gmail.com
On 9/7/06, _Kevin <kevin....@gmail.com> wrote:

Okay I installed KRJS , tested , did the sample index demo. Works fine!.

Now my problem:
On the page above you have :
1. # View
2. <%= select 'model','id' %>
3. <div id='select-b'>
4. <%= select 'model','category_id',
Model.find(@model.id).categories.map {|x| [x.name, x.id]} %>
5.</div>

Translating that to my models:

<%= select 'pay', 'id' %>
<div id='select-b'>
<%= select 'pay', 'wage_id', Pay.find(@pay.id).wages.map {|x|
[x.name, x.id] } %>
</div>

Throws an error:
Showing app/views/kr/index.rhtml where line #1 raised:
wrong number of arguments (2 for 3)

Extracted source (around line #1):

1: <%= select 'pay', 'id' %>
2: <div id='select-b'>
3: <%= select 'pay', 'wage_id', Pay.find(@pay.id).wages.map {|x|
4: [x.name, x.id] } %>

Stuart

x1

unread,
Sep 13, 2006, 11:56:14 PM9/13/06
to rubyonra...@googlegroups.com
It took me some time to make sense of all the various streams of help
here.. Figured I'd post a very standard example of how this works for
anyone who needs it.:

##############################
#[test_controller.rb]
class TestController < ApplicationController
def main

end
def update_sub_category
puts @params["item1"]
items = {"1" => ["apple", "asphalt", "averatec"], "2" =>
["bat", "base", "bowling"], "3" => ["cat", "carol"]}
@html = "<select name='item2'>"


@html += "<option value='0'>Sub-Category</option>"

items[@params["item1"]].each do |sub_category|
@html += "<option
value='#{sub_category}'>#{sub_category}</option>"
end
@html += "</select>"
render_text(@html, :layout => false)

end
end

###############################
# views/test/main.rhtml
<%= javascript_include_tag "prototype" %>
<div id="item1_div">
<select name="item1">


<option value=0>Select Category</option>

<option value="1">a</option>
<option value="2">b</option>
<option value="3">c</option>
</select>
</div>


<div id="item2_div">
</div>

<%= observe_field(
"item1",
:frequency => 0.25,
:update => "item2_div",
:url => { :controller => "test", :action => :update_sub_category },
:with => "'item1=' + value") %>

##########################################

sure there's room for improvement but it gets a functional example

Reply all
Reply to author
Forward
0 new messages