nested form with jquery error :- new value overwriting previous selected values in the partial

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

before Selecting the product

Screen Shot After selecting product and clicking on Add product

after selecting product and clicking add product

Screen shot after Reselecting product again

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. :)

Everything i have posted is on client side of rails. i will post the HTML codes of the rails in just a bit. — deeraj
– deeraj, Commented Aug 1, 2012 at 5:59

bharath · Accepted Answer · 2012-09-13 09:20:38Z

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 :)

Collectives™ on Stack Overflow

nested form with jquery error :- new value overwriting previous selected values in the partial

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related