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

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:

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,

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 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

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

ah hang on #74 Complex Forms Part 2 - RailsCasts 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:

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

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?