Srdjan Cengic
2014-Jan-05 03:16 UTC
Different selects in one form with same name attribute?
Question are at end of the topic. class Product < ActiveRecord::Base belongs_to :categoriesend class Category < ActiveRecord::Base has_many :productsend Categories table has 2 level nesting, for example. Main category is 'Men', sub-category is 'Accessories' and sub-sub-category is 'Watches'. <https://lh3.googleusercontent.com/-rnrsz1Wits4/UsjHdewNxJI/AAAAAAAAABM/8AtjacUy5jU/s1600/test1.png> Now when user creates new product he must choose category(only main category is required, but he can also chose sub and sub-sub category optional). My idea is following: I created 3 different select boxes with same name "product[category_id]", so only the last selected value will be sent to the server through params[:product][:category_id]. <div class="col-md-2 main-category"> <small> Main category? required </small> <%= f.select *:category_id*, Category.where('category_id IS ?', nil).collect {|c| [c.name, c.id]}, { include_blank: "Select category..." }, id: 'main-category', class: 'form-control' %></div> <div class="col-md-2 category-level-1"> <small> What type? optional </small> <%= f.select *:category_id*, {}, {}, class: 'form-control' %> </div> <div class="col-md-2 category-level-2"> <small> What type? optional </small> <%= f.select *:category_id*, {}, {}, class: 'form-control' %> </div> For populating 2nd select(sub-category) and 3rd(sub-sub-categories) i'm using ajax call where 2nd and 3rd select are initial hidden (display: none) through CSS. $('#main-category, .category-level-1 > select').change(function() { *var selectBox = this.id;* var selectedValue = $(this).val(); var url = '/categories/' + selectedValue + '/subcategories'; $.get(url, function(data) { *createSelect*(data, *selectBox*); });}); function *createSelect*(data, selectBox) { var $currentSelect = null; if (selectBox == 'main-category') { $('.category-level-1').show(); $('.category-level-2').hide(); $('.category-level-1 > select').find('option').remove(); $currentSelect = $('.category-level-1 > select'); } else { $('.category-level-2').show(); $('.category-level-2 > select').find('option').remove(); $currentSelect = $('.category-level-2 > select'); } $currentSelect.append('<option selected disabled>Select Category...</option>'); for(var i=0; i<data.length; i++) { $currentSelect.append('<option value="' + data[i].id + '">' + data[i].name + '</option>'); } } Where ajax call is sent to following route (categories controller)def subcategories id = params[:id] @subcategories = Category.where('category_id = ?', id) render json: @subcategories end So for final result i have following: <https://lh6.googleusercontent.com/-GI2WI8Z2Nus/UsjLg0ZSrFI/AAAAAAAAABg/s1gUVqrW2L4/s1600/test2.png> <https://lh6.googleusercontent.com/-GI2WI8Z2Nus/UsjLg0ZSrFI/AAAAAAAAABg/s1gUVqrW2L4/s1600/test2.png>*First of all is it normal to have different inputs in one form with same names created manually like i did in this example?*<https://lh6.googleusercontent.com/-GI2WI8Z2Nus/UsjLg0ZSrFI/AAAAAAAAABg/s1gUVqrW2L4/s1600/test2.png>*For some reason it seem like 'code-smell' to me. I'm relatively new to rails so wanted to ask am'i violating some good practices with this code?*<https://lh6.googleusercontent.com/-GI2WI8Z2Nus/UsjLg0ZSrFI/AAAAAAAAABg/s1gUVqrW2L4/s1600/test2.png>*Can you suggest better way to achieve same results?*<https://lh6.googleusercontent.com/-GI2WI8Z2Nus/UsjLg0ZSrFI/AAAAAAAAABg/s1gUVqrW2L4/s1600/test2.png> *Thanks.* <https://lh6.googleusercontent.com/-GI2WI8Z2Nus/UsjLg0ZSrFI/AAAAAAAAABg/s1gUVqrW2L4/s1600/test2.png> -- You received this message because you are subscribed to the Google Groups "Ruby on Rails: Talk" group. To unsubscribe from this group and stop receiving emails from it, send an email to rubyonrails-talk+unsubscribe-/JYPxA39Uh5TLH3MbocFF+G/Ez6ZCGd0@public.gmane.org To post to this group, send email to rubyonrails-talk-/JYPxA39Uh5TLH3MbocFF+G/Ez6ZCGd0@public.gmane.org To view this discussion on the web visit https://groups.google.com/d/msgid/rubyonrails-talk/3b61d439-a2dd-48e7-9426-a5363620eddd%40googlegroups.com. For more options, visit https://groups.google.com/groups/opt_out.