jQuery für mehrere verschachtelte Felder, die erst bearbeitet werden

Question

Ich suche wieder Hilfe mit jQueries, da ich in diesem Bereich schwach bin. Ich habe jQuery erfolgreich auf meinem Bestellformular implementiert, um Produkt: Preis in einem Textfeld anzuzeigen, wenn product_id über das Dropdown-Menü collection_select ausgewählt wird.

Meine Form ist wie folgt:

<%= form_for(@order) do |f| %> 
. 
. 
. 
<%= f.add_nested_fields_link :single_orders, "Add Product" %> 
<%= f.nested_fields_for :single_orders do |builder| %> 
    <div class = "form-inline"> 
    <%= builder.collection_select :product_id, @products, :id, :select_product, {:prompt => "choose product"}, {:class => "product_selection form-control"} %> 
    <%= builder.text_field :ctn_price, placeholder: "Price/carton", id: "ctn_price", readonly: true, class: 'ctn_price_field form-control' %> 
    <%= builder.text_field :qty, placeholder: "Quantity",id: "quantity", class: 'form-control' %> 
    <%= builder.text_field :price, placeholder: "Amount", id: "amount", readonly: true, class: 'form-control' %> 
    <%= builder.remove_nested_fields_link %> 
    </div> 
<% end %> 
. 
. 
. 
<%= f.submit "place order", class: "btn btn-primary" %> 
<% end %> 

konnte ich product_prices über jQuery durch orders.js.coffee Datei

jQuery -> 
    $(".product_selection").on "change", -> 
     $.ajax 
     url: "/orders/get_product_prices" 
     type: "GET" 
     dataType: "script" 
     data: 
      product_id: $('.product_selection option:selected').val() 

bekommen und es get_product_prices.js.erb

mit Anzeige

$('.ctn_price_field').val(<%= @product.price %>)  

alles funktioniert akzeptieren, dass, wenn ich mehr als 1 verschachteltes Feld hinzufügen, scheint die jQuery ein ble, nur das erste verschachtelte Feld zu erkennen und nur das erste .ctn_price_field zu ändern, was ich erreichen möchte, ist das Erzeugen mehrerer verschachtelter Felder in derselben Form und in der Lage, jeden verschachtelten_Feld: Preis entsprechend dem ausgewählten Produkt zu ändern. Danke im Voraus!!

Kann mir jemand helfen?

Answer 1

Sie müssen jeweils für diese Klasse ausführen, um auf alle Elemente zuzugreifen, die derselben Klasse zugeordnet sind. Wie -

$(".product_selection").each(function() { 
    // ... 
}); 

Und stellen Sie sicher, dass diese Bindung aufgerufen wird, nachdem Ihr Element in HTML gebunden ist.

Oder Sie verwenden können -

$('.product_selection').change(function(){ 
    // code goes here 
});