nemo_encoder/app/views/batch_line_items/index.html.erb

<div class="row ">
  <nav class="breadcrumb">  
    <a class="breadcrumb-item active" href="<%= dashboard_path %>">Home</a>   
    <a class="breadcrumb-item active" href="#">Batch Line Item List</a>       
  </nav>
</div>  
<div class="row content">    
  <%= form_tag export_path(:format => :csv),:method => :post  do%>       
    <div class="col-lg-4">
      <label><strong>Select Client:</strong></label>
      <%= select_tag "client", options_from_collection_for_select(@clients, "id", "name"), :class => 'form-control'%>
    </div>
    <div class="col-lg-4">
      <label><strong>Select Product:</strong></label>
      <%= select_tag "product_category", options_from_collection_for_select(@product_categories, "id", "name"), :class => 'form-control'%>
    </div>


    <div class="col-lg-4">
      <label><strong>Select Batch:</strong></label><br>
      <select class='selectpicker' id='batch' name='batch[]' multiple= "multiple"></select>         
      <%= button_tag "Export csv?",:class =>'btn btn-primary btn-sm',:id =>"btnexport" %>      
    </div> 
    <br/>
    <div class="col-lg-3">
      <label><strong>Export to Seller:</strong></label>
      <%= select_tag "seller", options_from_collection_for_select(@sellers, "id", "name"), :class => 'form-control'%>
    </div> 


  <% end %> 
</div> 
<div class="row show_image">
  <div class="col-lg-6"></div>
  <div class="col-lg-4" id="loading">
    <img src="<%= asset_path( 'spinner.gif' ) %>" />
  </div>
</div>
<div class="row content"> 
    <div class="card">     
    	<div class="card-header">              
            <strong>Batch Line Item List</strong>                         
        </div>
        <div class="card-block">          
           <% flash.each do |key, value| %>   
              <% if key =='message'  %>       
               <div class="alert alert-danger center">
                <a class="close" data-dismiss="alert">×</a>
                <%= value %>    
              <% end %>      
              </div> 
          <% end %>
            <div id ="filterrific_results">
            <table class="table" style="border-top:none">
                <thead>
                  <tr><b><i>Batch Line Items ( <%= @result_count %> )</i></b></tr>
                  <tr>                 
                    <th>Serial No</th>        
                    <th>Asset Identity</th>
                    <th>Manufacture UID</th>
                    <th>Batch No</th>
                    <th>Barcode</th>
                    <th>Created At </th>
                    <th>Updated At </th>    
                  </tr>
                </thead>
                <tbody>                 
                  <% @batchLineItems.each do |item| %>              
                    <tr>                       
                      <td><%= item.serial_no rescue '' %></td>     
                      <td><%= item.asset_identity rescue '' %></td>    
                      <td><%= item.manufacture_uid rescue '' %></td>   
                      <td><%= item.batch_name rescue '' %></td>  
                      <td><%= item.barcode rescue '' %></td>           
                      <td><%= item.created_at.strftime("%e,%b %Y %I:%M %p") rescue '' %></td>
                      <td><%= item.updated_at.strftime("%e,%b %Y %I:%M %p") rescue '' %></td>                          
                    </tr>
                  <% end %>
                </tbody>
            </table> 
            <%=paginate   @batchLineItems %>  
            <div>          

        </div>
    </div>
<script type="text/javascript">
$(document).ready(function(){  
  $('#loading').hide();
  client_id=$("#client").val();
  $("#product_category").val("<%= @product_category_id %>");
  product_category_id=$("#product_category").val()
 
  get_batch(client_id,product_category_id) 

  $('#product_category').on('change', function() {
     product_category_id=$(this).val();
     client_id=$("#client").val();
     get_batch(client_id,product_category_id);
  });

  $("#client" ).on('change', function(){
      client_id=$(this).val(); 
      product_category_id=$("#product_category").val();
      get_batch(client_id,product_category_id);
  }); 

  function get_batch(client_id,product_category_id){ 
      $('#batch').multiselect('disable'); 
      $.ajax({
          type: "GET",
          url: '<%= get_batch_path %>',
          dataType: "json",
          data : {'client_id':client_id ,'product_category_id':product_category_id},
          success: function(result){    
            if (result.data){
              $('#batch').multiselect('enable');
              $("#batch").empty();                           
              $.each(result.data, function (i, item){                 
                  $("#batch").append("<option value="+item.id+">"+ item.order_ref +"</option>") 
              });            
              $("#batch").multiselect('refresh');   
              $("#batch").multiselect('rebuild'); 
             
            } 
          }
      });
  }    
  $("#product_category").change(function(){    
      product_category=$(this).val(); 
      client=$("#client").val();
      batch=$("#batch").val();       
      filter(client,product_category,batch);
  });

  $("#client" ).on('change', function(){
      client=$(this).val(); 
      product_category=$("#product_category").val();
      batch=$("#batch").val(); 
      filter(client,product_category,batch);
  });

  $('#batch').change(function(){ 
      client=$("#client :selected").val(); 
      product_category=$("#product_category").val();
      batch=$(this).val();
      filter(client,product_category,batch);
     
 });  
 function filter(client,product_category,batch){ 
    if (batch==null){
      batch=""
    }
    paramlist='client='+client+"&product_category="+product_category+"&batch="+batch

    $.ajax({
        type:'GET',
        url: '<%= filter_path %>',    
        data:paramlist,
        beforeSend: function(){
          $('#loading').show();
        },
        complete: function(){
          $('#loading').hide();

        },
        success: function(data) {
        }  
    });   
 }
 $("ul.multiselect-container > li> a > label").attr("style","padding-left:10px");
})
</script>