Ruby on Rails：如何识别javascript函数中的nested_form元素？

在Ruby on Rails应用程序，说我有一个项目，一个订单模型如下：Ruby on Rails：如何识别javascript函数中的nested_form元素？

class Item 
    :name 
    :default_price 
end 

class Order 
    :customer 
    :item_id 
    :order_price 
end

上的订单，我可以自动使用JavaScript default_price和JSON呼叫作为填充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。这是我应该关心的吗？我应该考虑哪些问题？

EDIT 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 %>

的OrderItems部分

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

来源

2012-01-29 Andy Harvey

所以要改变所选项目的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，即使在HTML 4中也可以使用data-属性。

来源

2012-01-29 08:27:40 Behrang

感谢@behrang，我刚刚来到同一个解决方案，以及！我是否需要关心所有选择字段共享相同的ID？我应该计划的任何问题？（请参阅我对原始问题的编辑）感谢您的时间！ – 2012-01-29 08:37:15

@AndyHarvey我猜你的表单构造不正确，否则不同的选择应该有不同的ID。这些id通常是这样的形式：'foo [1]'，'foo [2]'等等。请您张贴您用于生成表单的代码。顺便说一下，我注意到在一些具有相同ID的多个元素的浏览器中，有时候会混淆jQuery。 – Behrang 2012-01-29 08:45:30

谢谢@behrang。我已将相关视图代码添加到上述问题中。 – 2012-01-29 08:59:31

我由nested_form宝石的JavaScript文件jquery_nested_form.js移动到我的文件夹/javascripts解决了这个问题，那么改变“随机”属性ID递增（这应该在默认的这个文件的优先级）。这使您可以预测输入字段ID，从而轻松识别它。另一个好处是，当表单重新加载错误消息时，属性名称保持不变。我不是专业人士，但是，这不会导致任何问题。

在我jquery_nested_form.js：

newId: function() { 
    fieldNum += 1 
    return fieldNum; 
},

来源

2016-02-09 20:41:01 Matthias

Ruby on Rails：如何识别javascript函数中的nested_form元素？

回答

相关问题