Question

Well i am trying to do a dynamic combo select inside a partial. and the value of the batch no stays the same, ie whatever batch no i select in first partial rest of the partial has the same value.

Code is as follows

Form

<%= nested_form_for(@bill) do |f| %>

    <%= f.label :name %><br />
    <%= f.text_field :name %>
  <%= f.link_to_add "add product", :bill_line_items %>
    <%= f.submit %>
<% end %>

the partial

<%= javascript_include_tag 'testing' %>
  <div class ="kool">

  <div class ="name"><%= f.label :product_id %>
<%= f.collection_select :product_id,Product.all ,:id,:name, :style => 'width:150px;'%></div><br />

    <div class="list">
    <%= f.label :batch_no %><br />
    <%= f.grouped_collection_select :batch_no, Product.all, :store_opening_stocks, :id, :batch_no, :batch_no %><br/></div>

  </div>

Js File

    jQuery(document).ready(function(){
       var batchNo = jQuery('.list').html();

  jQuery('.name').bind('change',function() {

     var  productSelected = jQuery('.name:selected').val();

   var options = jQuery(batchNo).find("optgroup[label='" + productSelected + "']").html();

     jQuery('.list select').html(options);

            });
          });

Screen Shots before selecting product

Screen Shot After selecting product and clicking on Add product

Screen shot after Reselecting product again

as you can see the Product-2 group i’e P1 and P2(batch nos of product 2) coming in second and third partial. and any attempt to change product, the batch nos show empty as shown in the picture.

how do i solve this problem?? should i use Parent somewhere or this option?? Guidance required.

Thanks in advance. 🙂

Answer 1

Try this. it will help. use the parent element to get the value of that particular form. in this case parent is kool and getJSON method is better prefered than this method so your code will be something like this.

jQuery(document).ready(function()
{
jQuery(".prod select").bind("change", function() {
      var data = {
        product_id: jQuery(this).val()  
      }
      var wrapperDivElement = jQuery(this).parents(".kool");
      jQuery.getJSON(
         "/customer_bills/get_batch",
        data,
        function(data){
      var result = "",a;
      var b = "<option>Select Batch no</option>"
      for(i=0;i<data.length; i++)
      {
       a = data[i];  
       result = result + "<option value="+a[0]+">"+a[0]+"</option>";
      }
       jQuery('.batch select', wrapperDivElement).html(b+result);
      });            
        });
    }); 

in controller

def get_batch
    @product_batch = StoreOpeningStock.find_all_by_product_id(params[:product_id]).map{|p| [p.batch_no, p.price]} if params[:product_id]
    respond_to do |format|
      format.json { render json: @product_batch }
    end
  end

and in routes

resources :customer_bills do
    collection do
      get :get_batch
    end
  end

this method is much more clear and better. all the best 🙂