javascript - ruby rails : How to identify nested_form elements in javascript functions?

Question

在 Ruby on Rails 应用程序中，假设我有一个 Item 和一个 Order 模型，如下所示:

class Item
  :name
  :default_price
end 

class Order
  :customer
  :item_id
  :order_price
end

在订单表单上，我可以使用 javascript 和 json 调用自动使用 default_price 填充 order_price 字段，如下所示:

$(function (){  
    $('#order_item_id').live("change", function(e) {
    e.preventDefault();
      $.ajax({
        url: "/items/" + $(this).val(),
        dataType: "json",
        contentType: "application/json; charset=utf-8",
        success: function(data) {   
        $('#order_price').val(data.item.default_price);
        },
        error: function(xhr,exception,status) {
          //errors....
        }
      });
    });
});

到目前为止，还不错。但现在假设我希望能够在一个订单下列出多个项目。在这种情况下，我可以使用嵌套形式和下表:

class Item
  :name
  :default_price
end 

class Order
  :customer
end

class OrderItem
   :order_id
   :item_id
   :order_price
end

问题是每个嵌套的 OrderItem 记录都有相同的选择 ID 和一个随机的 order_price ID，例如:

<div class="fields">
  <ol>
    <li>  //first nested record
      <select id="order_item_id"></select>
      <input id="order_orderitems_attributes_0_orderprice"></input>
    </li>
    <li>  //second nested record
      <select id="order_item_id"></select>
      <input id="order_orderitems_attributes_###randomnumber###_orderprice"></input>
    </li>
  </ol>
</div>

显然这会导致 javascript 函数出现问题。

如何让我的嵌套表单与我的 javascript 完美配合，以便选择一个项目填充相应的价格字段？

我需要将嵌套记录的标识符传递给函数，以便函数在选择字段更改时运行。我还需要以某种方式识别正确的订单价格字段。

有人有什么想法吗？

谢谢!!!

编辑

实际上，我可以通过使用 .next() 选择器查找下一个 DOM 元素来实现这一点。即，在 js 函数中

$('#order_item_id').live("change", function(e) {
    var current_price = $(this).next('.order-price')[0];
    .....
    success: function(data) {   
            $('current_price').val(data.item.default_price);
            },
    .....

但我对每个选择字段都具有相同的 ID 感到不自在。这是我应该关心的事情吗？有什么我应该考虑的问题吗？

编辑 2

订单

<%= nested_form_for @order do |f| %>
    .....order fields
    <ol>
        <%= f.fields_for :orderitems %>         
    </ol>
    <p><%= f.link_to_add new_ico, :orderitems %></p>
    <p><%= f.submit %></p>
<% end %>

部分订单项

<li>
    <%= select(:orderitem,:item_id,@items.collect{|s|[s.name, s.id]},:prompt=>"select") %>
    <%= f.text_field :order_price, :class => "order-price" %>
</li>

Answer 1

所以您想要更改所选项目以在 select 之后立即更新输入，对吧？如果是这样，您可以将 success 处理程序更改为如下所示:

function(data) {   
  // this refers to the select that its value has changed
  // and next('input') finds the input right after it
  $(this).next('input').val(data.item.default_price);
}

为了使输入包含特定值(例如订单价格)更加明确，您可以为其分配一个 HTML 5 data- 属性，如下所示:

<%= f.input :order_price, :"data-field" => "order-price" %>

这样 JavaScript 中的 CSS 选择器会变得更加直观:

function(data) {   
  // this refers to the select that its value has changed
  // and next('input') finds the input right after it
  $(this).next('input[data-field=order-price]').val(data.item.default_price);
}

值得一提的是，如果您使用的是最新版本的 jQuery，data- 属性甚至可以在 HTML 4 中使用。