Ruby on Rails: Как идентифицировать элементы nested_form в функциях javascript?

Question

В Ruby On Rails приложения, что у меня есть товар и модель заказа следующим образом:

class Item 
    :name 
    :default_price 
end 

class Order 
    :customer 
    :item_id 
    :order_price 
end 

На форме заказа, я могу автоматически заполнить поле order_price с default_price с помощью JavaScript и JSon вызова как следует:

$(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 запись имеет один и тот же выберите идентификатор и случайное 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, так что выбор элемента заполняет соответствующее поле цены?

Мне нужно будет передать идентификатор вложенной записи в функцию, чтобы функция выполнялась при изменении поля выбора. Мне также необходимо как-то определить правильное поле цены заказа.

У кого-нибудь есть идеи?

Спасибо !!!

EDIT

На самом деле, я могу получить эту работу, используя селектор .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); 
      }, 
    ..... 

, но я чувствую себя неудобно, что каждое поле выбора имеет тот же идентификатор. Это то, о чем я должен беспокоиться? Есть ли какие-то проблемы, о которых я должен думать?

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

ТоварыЗаказ частичных

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

Таким образом, селектор CSS в вашем JavaScript станет немного понятнее:

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); 
} 

Уорт отметив, что атрибуты data- работают даже в HTML 4, если вы используете последнюю версию jQuery.

Answer 2

Я решил эту проблему путем перемещения файла JavaScript в nested_form драгоценного камня jquery_nested_form.js в мою /javascripts папку (это следует отдавать приоритет этого файла по умолчанию один), то изменяя «случайный» атрибут Id для увеличения. Это позволяет прогнозировать идентификатор поля ввода и, следовательно, легко идентифицировать его. Другое преимущество заключается в том, что когда форма перезагружается сообщениями об ошибках, имена атрибутов остаются неизменными. Я не профессионал, но sofar это не привело к каким-либо проблемам.

В моей jquery_nested_form.js:

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