Rails - Oct 2009 - AJAX - how to have multiple select form sets implemented?

hi, there :)


 Consider a blogging application whereby a user is trying to add a new
blog.

He/she has to select a category. Upon selecting a category from a drop
down box, a new sub categories drop down box will be created (hence an
AJAX call). Got this implemented and it''s ok.

Now, let''s assume that a given blog can have multiple categories (and
subcategories).
For example, a blog on a restaurant review can belong to the following
categories & subcategories:

1) "food" -> "fine dining"
2) "people" -> "lifestyle"
3) "travelling" -> "restaurants"

After selecting a set of category and sub category, there will be a
link entitled, "add another category/subcategory" (I guess this can be
done with link_to_remote or something).

My question is, how do you code it such that upon clicking on the link
mentioned, another category drop down box will be displayed in the
form. Selecting a category value would then cause a sub categories
drop down box to appear in the same form allowing the user to select
another sub category. Again, the link entitled, "add another category/
subcategory" will also be shown.

How do I go abouts implementing this? I know it''s a call to use AJAX
but I don''t exactly know how. I have tried reading up some rails books
and cookbooks to no success.

Please help!! :)


thanks

Ultimately, you''re going to end up with arrays of category ids and
subcategory ids.  You''ll represent these in your form with fields
named something like "category_id[]" and "subcategory_id[]".
So your
ajax call will just need to return the html to insert a new properly-
named field, or perhaps just json representing the available options
and you create the new properly named field via DOM methods.

<%= collection_select :node, :id,
Node.find(:all,:order=>''name''), :id,
:name,{:prompt => ''Select Node'' },{ :onchange =>
remote_function(:url =>
{ :action => "shownodecarddata"},  :with =>
"''id='' + $(''node_id'').value"
) }  %>

Render your select boxes with a partial showing the data.





ct9a wrote:
> hi, there :)
> 
> 
>  Consider a blogging application whereby a user is trying to add a new
> blog.
> 
> He/she has to select a category. Upon selecting a category from a drop
> down box, a new sub categories drop down box will be created (hence an
> AJAX call). Got this implemented and it''s ok.
> 
> Now, let''s assume that a given blog can have multiple categories
(and
> subcategories).
> For example, a blog on a restaurant review can belong to the following
> categories & subcategories:
> 
> 1) "food" -> "fine dining"
> 2) "people" -> "lifestyle"
> 3) "travelling" -> "restaurants"
> 
> After selecting a set of category and sub category, there will be a
> link entitled, "add another category/subcategory" (I guess this
can be
> done with link_to_remote or something).
> 
> My question is, how do you code it such that upon clicking on the link
> mentioned, another category drop down box will be displayed in the
> form. Selecting a category value would then cause a sub categories
> drop down box to appear in the same form allowing the user to select
> another sub category. Again, the link entitled, "add another category/
> subcategory" will also be shown.
> 
> How do I go abouts implementing this? I know it''s a call to use
AJAX
> but I don''t exactly know how. I have tried reading up some rails
books
> and cookbooks to no success.
> 
> Please help!! :)
> 
> 
> thanks
-- 
Posted via http://www.ruby-forum.com/.

On Thu, Oct 15, 2009 at 6:22 AM, ct9a
<anexiole-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:
> Now, let''s assume that a given blog can have multiple categories
(and
> subcategories).
> For example, a blog on a restaurant review can belong to the following
> categories & subcategories:
>
> 1) "food" -> "fine dining"
> 2) "people" -> "lifestyle"
> 3) "travelling" -> "restaurants"
>
> After selecting a set of category and sub category, there will be a
> link entitled, "add another category/subcategory"
Have you considered using simple check boxes for categories with
an associated subcategory select (or radio button set)?

You could simplify the interface and eliminate some unnecessary
AJAX traffic.

FWIW,
-- 
Hassan Schroeder ------------------------
hassan.schroeder-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org
twitter: @hassan

hi, there :)


 Consider a blogging application whereby a user is trying to add a new
blog.

He/she has to select a category. Upon selecting a category from a drop
down box, a new sub categories drop down box will be created (hence an
AJAX call). Got this implemented and it''s ok.

Now, let''s assume that a given blog can have multiple categories (and
subcategories).
For example, a blog on a restaurant review can belong to the following
categories & subcategories:

1) "food" -> "fine dining"
2) "people" -> "lifestyle"
3) "travelling" -> "restaurants"

After selecting a set of category and sub category, there will be a
link entitled, "add another category/subcategory" (I guess this can be
done with link_to_remote or something).

My question is, how do you code it such that upon clicking on the link
mentioned, another category drop down box will be displayed in the
form. Selecting a category value would then cause a sub categories
drop down box to appear in the same form allowing the user to select
another sub category. Again, the link entitled, "add another category/
subcategory" will also be shown.

How do I go abouts implementing this? I know it''s a call to use AJAX
but I don''t exactly know how. I have tried reading up some rails books
and cookbooks to no success.

Please help!! :)


thanks

Would love to do that but there''s too many categories (and potentially
lots more to come). Hence,
the interface would be neater with select boxes representing
categories and further calls to subcategories.


> Have you considered using simple check boxes for categories with
> an associated subcategory select (or radio button set)?
>
> You could simplify the interface and eliminate some unnecessary
> AJAX traffic.

this sounds like a plan but could you propose some links to read up
on?
Would be nice if some API doc was to mention on the syntax of having
arrays
in the form for select boxes.
In this case,  some in depth documentation illustrating how
collection_select
can be used for arrays in the form. I suppose the answer to this
question would benefit many who are thinking of developing serious
apps with Rails.


thanks


On Oct 16, 7:49 am, jemminger
<jemmin...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org>
wrote:
> Ultimately, you''re going to end up with arrays of category ids and
> subcategory ids.  You''ll represent these in your form with fields
> named something like "category_id[]" and
"subcategory_id[]".  So your
> ajax call will just need to return the html to insert a new properly-
> named field, or perhaps just json representing the available options
> and you create the new properly named field via DOM methods.

any more tutorials, guys? Most of the ones listed are just too basic.

ah hang on http://railscasts.com/episodes/74-complex-forms-part-2
might be the answer (roughly speaking as it shows how to add form
elements) :)

Will try and let you guys know.

Cheers :)

Hi,

just this it like this

<div id="category">
     -- category drop down --
</div>
<div id="subcategory">
   -- sub category drop down ------------
</div>
<div id="addcategory">
   -- add category link -------------
</div>
<div id="addsubcategory">
  -- add sub category link ----------
</div>

1  - You load category
2 -  In change event of the category you load sub category (Ajax)
3 - If user clicks add category link (inside addcategory div) , you do
an ajax updater and show the user a textbox
     to enter his/her category
4- and when user clicks save, you reload category div and re-set
subcategory div (so user will be able to select his new category)
5 - subcategory is also same except you load only the sub categories

hope this helps,

cheers
sameera




On Oct 16, 3:32 pm, ct9a
<anexi...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org>
wrote:
> ah hang onhttp://railscasts.com/episodes/74-complex-forms-part-2
> might be the answer (roughly speaking as it shows how to add form
> elements) :)
>
> Will try and let you guys know.
>
> Cheers :)

Looks good but
1) when the "add category" link is clicked, another category drop down
box is to be shown and not a text box
2) if there are multiple categories and subcategories,

 a) how would Rails identify the fields?
 b) how would the syntax of the collective_select form element look
like?

essentially , arrays should be present for categories and sub
categories like

category_id[1] = 34,
subcategory_id[1] = 19,


category_id[2] = 11,
subcategory_id[2] = 339,


category_id[3] = 552,
subcategory_id[3] = 85,


how do you do that in rails?




On Oct 17, 7:47 am, sameera
<sameera...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org>
wrote:
> Hi,
>
> just this it like this
>
> <div id="category">
>      -- category drop down --
> </div>
> <div id="subcategory">
>    -- sub category drop down ------------
> </div>
> <div id="addcategory">
>    -- add category link -------------
> </div>
> <div id="addsubcategory">
>   -- add sub category link ----------
> </div>
>
> 1  - You load category
> 2 -  In change event of the category you load sub category (Ajax)
> 3 - If user clicks add category link (inside addcategory div) , you do
> anajaxupdater and show the user a textbox
>      to enter his/her category
> 4- and when user clicks save, you reload category div and re-set
> subcategory div (so user will be able toselecthis new category)
> 5 - subcategory is also same except you load only the sub categories
>
> hope this helps,
>
> cheers
> sameera
>
> On Oct 16, 3:32 pm, ct9a
<anexi...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:
>
> > ah hang onhttp://railscasts.com/episodes/74-complex-forms-part-2
> > might be the answer (roughly speaking as it shows how to addform
> > elements) :)
>
> > Will try and let you guys know.
>
> > Cheers :)