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元素？

回答

相關問題