AJAX - how to have multiple select form sets implemented?

ct9a · October 15, 2009, 3:23pm

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:

“food” -> “fine dining”
“people” -> “lifestyle”
“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

ct9a · October 15, 2009, 10:51pm

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.

ct9a · October 16, 2009, 1:36am

<%= 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:

“food” -> “fine dining”

“people” -> “lifestyle”

“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

ct9a · October 16, 2009, 9:28am

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

ct9a · October 16, 2009, 9:33am

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.

ct9a · October 16, 2009, 2:31am

On Thu, Oct 15, 2009 at 6:22 AM, ct9a [email protected] wrote:

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 S. ------------------------ [email protected]
twitter: @hassan

ct9a · October 16, 2009, 12:11pm

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

ct9a · October 16, 2009, 12:33pm

ah hang on #74 Complex Forms Part 2 - RailsCasts
might be the answer (roughly speaking as it shows how to add form
elements)

Will try and let you guys know.

Cheers

ct9a · October 19, 2009, 2:09am

Looks good but

when the “add category” link is clicked, another category drop down
box is to be shown and not a text box
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?

ct9a · October 17, 2009, 1:28am

Hi,

just this it like this

-- category drop down --

-- sub category drop down ------------

-- add category link -------------

-- add sub category link ----------

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