Поле цены обновления рельсов при выборе товара

Question

У меня есть вложенная форма для purchase_orders и purchase_order_lines.

purchase_order_line имеет атрибуты component_id, количество, цену.

Я пытаюсь обновить цену в режиме реального времени, когда выбран ингредиент.

purchase_order_line_fields

 <div class="purchase_order_lines">
  <div class="nested-fields">
    <div class="form-group">
      <div class="row">
        <div class="col-sm-3">
          <%= select_tag "ingredients", "", class: "ingredients" %>
        </div>
        <div class="col-sm-3">
          <%= f.input :quantity, id: "quantity", input_html: {value: '1'}%>
        </div>
        <div class="col-sm-2">
          <%= f.input :price, class: 'price' %>
        </div>
        <div class="col-sm-2">
          <%= f.input :total_amount, class: "total_amount", readonly: true %>
        </div>
        <div class="col-sm-2">
          <%= link_to_remove_association "Remove", f, class: "btn btn-sm btn-danger" %>
        </div>
      </div>
    </div>
  </div>
</div>

application.js

$(document).ready(function() {
$('.ingredients').change(function(){
    var ingredient_id = $(this).val();
    var price = eval($(this).data('price'));
  $('.price').html(price)
})
})

Слушатель событий работает, но когда я выбираю новый ингредиент в раскрывающемся списке, значение цены становится пустым.Вторая проблема, с которой я столкнулся, заключается в том, что если я изменяю ингредиент в раскрывающемся списке, обновляются все ценовые поля для всех purchase_order_lines, а не только один, когда выбирается новый ингредиент.Как я могу это исправить?

Answer 1

Для проблемы с отсутствием цены вы пытаетесь получить значение атрибута data-price, который не существует.Вы хотите сделать:

var price = parseFloat(this.value);

Для задачи одновременного обновления всех .price необходимо настроить таргетинг только на братьев и сестер текущего .ingredients:

$(this).siblings('.price').html(price);

Метод .siblings ищет соседние элементы (дочерние элементы родительского прямого родителя объекта jquery) с помощью предоставленного селектора.

Вы должны иметь все purchase_order_line_fields, заключенные в элемент div, если у вас есть все purchase_order_line_fields с одним и тем же родительским элементом он не будет работать.

Кстати, проверьте свои идентификаторы, так как вы их определили, у вас будет несколько элементов с одинаковым идентификатором, что недопустимо в формате HTML.