Saturday, January 4, 2014

[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


Real Estate