AJAX - how to have multiple select form sets implemented?

hi, there :slight_smile:

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

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
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!! :slight_smile:


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:

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.


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.

this sounds like a plan but could you propose some links to read up
Would be nice if some API doc was to mention on the syntax of having
in the form for select boxes.
In this case, some in depth documentation illustrating how
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.


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) :slight_smile:

Will try and let you guys know.

Cheers :slight_smile:


just this it like this

<div id="category">
     -- category drop down --
<div id="subcategory">
   -- sub category drop down ------------
<div id="addcategory">
   -- add category link -------------
<div id="addsubcategory">
  -- 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,


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

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?