[Rails] Different selects in one form with same name attribute?
Question are at end of the topic.
class Product < ActiveRecord::Base belongs_to :categories end class Category < ActiveRecord::Base has_many :products end
Categories table has 2 level nesting, for example. Main category is 'Men', sub-category is 'Accessories' and sub-sub-category is 'Watches'.
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:
First of all is it normal to have different inputs in one form with same names created manually like i did in this example?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?Can you suggest better way to achieve same results?Thanks.
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@googlegroups.com.
To post to this group, send email to rubyonrails-talk@googlegroups.com.
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.
0 Comments:
Post a Comment
Subscribe to Post Comments [Atom]
<< Home