Rails - Jan 2009 - Dynamically generate a field option from dropdown selection

Hi all,

I''m having a hard time trying to find a good tutorial on how to
generate
a field (with ajax) from a dropdown selection.

For example:

I have an app where you can select up to two tickets per person. Only if
the user selects ''2'' from the dropdown menu should a field pop
up/generate below the dropdown and ask the user for the name of the
second person.

So far I have the following code:

<h3>Number of Tickets?</h3>
<%= select :tickets, :quantity, { "Select quantity" =>
"", "1" => "1",
"2" => "2"}  %>

<h3>Name of guest?</h3>
  <%= f.text_field :guest_name %>


So in my case, only if quantity is selected as two should guest_name
appear (without refreshing the page).


Thanks in advance and THANK YOU FOR YOUR TIME!!


Best regards,
Tony
-- 
Posted via http://www.ruby-forum.com/.

--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Talk" group.
To post to this group, send email to
rubyonrails-talk-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-talk+unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-talk?hl=en
-~----------~----~----~----~------~----~------~--~---

On Thu, Jan 22, 2009 at 9:13 AM, Tony Tony
<rails-mailing-list-ARtvInVfO7ksV2N9l4h3zg@public.gmane.org
> wrote:
>
> Hi all,
>
> I''m having a hard time trying to find a good tutorial on how to
generate
> a field (with ajax) from a dropdown selection.
>
> For example:
>
> I have an app where you can select up to two tickets per person. Only if
> the user selects ''2'' from the dropdown menu should a
field pop
> up/generate below the dropdown and ask the user for the name of the
> second person.
>
> So far I have the following code:
>
> <h3>Number of Tickets?</h3>
> <%= select :tickets, :quantity, { "Select quantity" =>
"", "1" => "1",
> "2" => "2"}  %>
>
> <h3>Name of guest?</h3>
>  <%= f.text_field :guest_name %>
>
>
> So in my case, only if quantity is selected as two should guest_name
> appear (without refreshing the page).
>
>
> Thanks in advance and THANK YOU FOR YOUR TIME!!
>
I was looking for an answer to much the same question not too long ago.  I
found all sorts of tutorials showing how to populate a 2nd drop down menu
based upon the contents of the first (such as
http://pullmonkey.com/2008/3/30/dynamic-select-boxes-ruby-on-rails).
Ultimately, I was able to learn enough from reading those to learn that (in
your case) I would want to put a blank <div> tag in my layout where I
would
want the "name of guest" stuff to appear, and to populate the
"name of
guest" stuff only when quantity == 2.

I hope this helps.

--wpd

--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Talk" group.
To post to this group, send email to
rubyonrails-talk-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-talk+unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-talk?hl=en
-~----------~----~----~----~------~----~------~--~---

Patrick Doyle wrote:
> Ultimately, I was able to learn enough from reading those to learn that 
> (in
> your case) I would want to put a blank <div> tag in my layout where I
> would
> want the "name of guest" stuff to appear, and to populate the
"name of
> guest" stuff only when quantity == 2.
> 
> I hope this helps.
> 
> --wpd

Thanks for the tip Patrick.

I saw the article and I understand how it''s SUPPOSED to work. I also
saw
a railscast about the same topic (dynamic drop down which fills a second 
drop down). Unfortunately my javascript skills are not so great, so
it''s
a challenge to make it work. I''m sure with some more time I''ll
get it
working.

If anyone else can offer some help I''d appreciate it. Thanks again!


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

--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Talk" group.
To post to this group, send email to
rubyonrails-talk-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-talk+unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-talk?hl=en
-~----------~----~----~----~------~----~------~--~---

I''ve just been doing something similar. This works, but might not be
as Railsy as it could be:

<h3>Number of Tickets?</h3>
<%= select :tickets, :quantity, {"1" => "1",
"2" => "2"}, {:prompt =>
''Select quantity...''}, {:onchange => "if(this.options
[this.selectedIndex].value==''2'')
  {Effect.BlindDown(''guest_name'', {duration: 0.5}); return
false;}
     else
  {Effect.BlindUp(''guest_name'', {duration: 0.5}); return
false;}"} %>

<div id="guest_name" style="display:none;">
  <h3>Name of guest?</h3>
  <%= f.text_field :guest_name %>
</div>

Notes:
1. This is not using Ajax - it is using JavaScript to show and hide a
div based on a selected value. You''re not fetching data, so why use
Ajax to go to the server in this case?
2. You need to have Scriptaculous installed to use the effects (good
idea to give feedback to the user?). If you have <%javascript_include_tag
:defaults %> in the head of your html page then
Scriptaculous is good to go.
3. Even if the guest_name field is hidden, it will still be submitted,
so test the value from your quantity select before saving the value
from guest_name.
4. I made a small change to your select to get your prompt (''Select
quantity'') to work correctly.
5. Be careful with the formatting of the onchange part when copying
the code here: there should be new lines before {Effect.BlindDown,
else, and {Effect.BlindUp, but nowhere else.

Good luck.


On Jan 23, 3:13 am, Tony Tony
<rails-mailing-l...-ARtvInVfO7ksV2N9l4h3zg@public.gmane.org>
wrote:
> Hi all,
>
> I''m having a hard time trying to find a good tutorial on how to
generate
> a field (with ajax) from a dropdown selection.
>
> For example:
>
> I have an app where you can select up to two tickets per person. Only if
> the user selects ''2'' from the dropdown menu should a
field pop
> up/generate below the dropdown and ask the user for the name of the
> second person.
>
> So far I have the following code:
>
> <h3>Number of Tickets?</h3>
> <%= select :tickets, :quantity, { "Select quantity" =>
"", "1" => "1",
> "2" => "2"}  %>
>
> <h3>Name of guest?</h3>
>   <%= f.text_field :guest_name %>
>
> So in my case, only if quantity is selected as two should guest_name
> appear (without refreshing the page).
>
> Thanks in advance and THANK YOU FOR YOUR TIME!!
>
> Best regards,
> Tony
> --
> Posted viahttp://www.ruby-forum.com/.
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Talk" group.
To post to this group, send email to
rubyonrails-talk-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-talk+unsubscribe@googlegroups.com
For more options, visit this group at
http://groups.google.com/group/rubyonrails-talk?hl=en
-~----------~----~----~----~------~----~------~--~---

Chris Bartlett wrote:
> I''ve just been doing something similar. This works, but might not
be
> as Railsy as it could be:
> 
> <h3>Number of Tickets?</h3>
> <%= select :tickets, :quantity, {"1" => "1",
"2" => "2"}, {:prompt =>
> ''Select quantity...''}, {:onchange =>
"if(this.options
> [this.selectedIndex].value==''2'')
>   {Effect.BlindDown(''guest_name'', {duration: 0.5});
return false;}
>      else
>   {Effect.BlindUp(''guest_name'', {duration: 0.5}); return
false;}"} %>
> 
> <div id="guest_name" style="display:none;">
>   <h3>Name of guest?</h3>
>   <%= f.text_field :guest_name %>
> </div>
> 

Thanks Chris! I was able to get it working!

You''re right about the Ajax not being needed, I''m just so used
to
thinking that anything that "pops up" is ajax, even though it
doesn''t
need to be a server request. Sorry about that.

Two issues I''m having with this implementation though:

First, if I go to edit the form, I can see the ''2'' is selected
but the
guest_name field is hidden until I select a different number of tickets 
(I guess this activates/reloads the javascript). I even tried doing an 
if statement in the div: <div id="guest_name"<%= "
style=''hidden''" if
!@tickets.quantity == ''2'' %>> which works (I can see
this from the page
source). However, the div is ALWAYS visible, until I select a different 
number of tickets and it acvtivates/reloads the javascript. Any ideas on 
how to get this to work?

Second, I ended up using a table structure for the form, wrapping the 
DIV around the <TR> doesn''t work (the guest_name field is always 
visible). I''m guessing this is a table structure issue so I need to
take
a more in depth look.


Thanks again for the code Chris! It was extremely helpful.


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

--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Talk" group.
To post to this group, send email to
rubyonrails-talk-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-talk+unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-talk?hl=en
-~----------~----~----~----~------~----~------~--~---

Tony Tony wrote:
> I even tried doing an 
> if statement in the div: <div id="guest_name"<%= "
style=''hidden''" if
> !@tickets.quantity == ''2'' %>> 

Okay, obviously there was a typo which when fixed ended up working.

style="display:none;" not style="hidden".


Hope this helps someone.



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

--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Talk" group.
To post to this group, send email to
rubyonrails-talk-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-talk+unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-talk?hl=en
-~----------~----~----~----~------~----~------~--~---

On Jan 25, 11:45 am, Tony Tony
<rails-mailing-l...-ARtvInVfO7ksV2N9l4h3zg@public.gmane.org>
wrote:
> Thanks Chris! I was able to get it working!
You''re very welcome. I''ve received help here, so hope to give
it when
I can. And while we''re talking about that, have we thanked the
wonderful Fred Cheung this week? Fred: you''re a gem.
> Two issues I''m having with this implementation though:
>
> First, if I go to edit the form, I can see the ''2'' is
selected but the
> guest_name field is hidden until I select a different number of tickets
> (I guess this activates/reloads the javascript). I even tried doing an
> if statement in the div: <div id="guest_name"<%= "
style=''hidden''" if
> !...@tickets.quantity == ''2'' %>> which works (I can
see this from the page
> source). However, the div is ALWAYS visible, until I select a different
> number of tickets and it acvtivates/reloads the javascript. Any ideas on
> how to get this to work?
Good point about the div not being visible when editing the form. I''d
better go and check my own code...
> Second, I ended up using a table structure for the form, wrapping the
> DIV around the <TR> doesn''t work (the guest_name field is
always
> visible). I''m guessing this is a table structure issue so I need
to take
> a more in depth look.
I started off using tables for forms too, but was dissatisfied because
a table is supposed to be a way of showing tabular information (i.e.
rows of similar data) and most forms don''t fall in that category.
Tables are a pain when you want to do this kind of thing because of
some browser-specific issues (Internet Explorer...). There''s a
discussion on Rails Forum about using css (and not tables) to lay out
forms: http://railsforum.com/viewtopic.php?id=25297

--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Talk" group.
To post to this group, send email to
rubyonrails-talk-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-talk+unsubscribe@googlegroups.com
For more options, visit this group at
http://groups.google.com/group/rubyonrails-talk?hl=en
-~----------~----~----~----~------~----~------~--~---