Как динамически генерировать div id в javascript

Question

У меня такое чувство, что это будет один из тех костяных вопросов. Но у меня есть я почесываю голову.

У меня есть частичный, который создает серию дивы с уникальными идентификаторами на основе объектных идентификаторов:

<% @contact.email_addresses.each do |email_address| %> 
    <div id=<%= "email_address_"+email_address.id.to_s %>> 
    . 
    . do stuff 
    . 
    </div> 
<% end %> 

Это дает мне ряд дивы, которые выглядят так:

<div id="email_address_13"> 
    foo@bar.com 
    <div class="form_icon" title="edit email address" rel="tooltip" ,=""> 
    <a data-remote="true" href="/email_addresses/13/edit?contact_id=2"> 
     <img height="11" width="11" src="/assets/mini_icons/fat_pencil.png" alt="Fat_pencil"> 
    </a> 
    </div> 
    <div class="form_icon" title="delete email address" rel="tooltip" ,=""> 
    <a rel="nofollow" data-remote="true" data-method="delete" data-confirm="Are you sure?" href="/email_addresses/13?contact_id=2"> 
     <img height="9" width="9" src="/assets/mini_icons/remove.png" alt="Remove"> 
    </a> 
    </div> 
</div> 

Как вам может видеть, что в каждом div есть кнопка редактирования и отмены. Все идет нормально.

Когда пользователь нажимает кнопку редактирования, я хочу заменить содержимое div формой, которая позволяет редактировать. Итак, в моем файле edit.js.erb я хочу:

$('#email_address_13').html("<%= escape_javascript(render 'email_address_form')%>") 

Итак, вот вопрос. В моем файле edit.js.erb, как мне конкатенировать email_address_ с моим email_address.id, так что я получаю селектор, который выглядит как '#email_address_13'?

Когда я с жестким кодом '#email_addres_13', все работает красиво. так что это просто вопрос о том, как динамически генерировать мой селектор div внутри моего файла edit.js.erb.

Спасибо!

Answer 1

Понял .. . Выделение одной строки кода в файле edit.js.erb делает все это.

С точки зрения конкатенации, уловка:

$('#email_address_<%= @email_address.id.to_s %>')

Поскольку это в .erb файл, я могу использовать <%= @email_address.id.to_s %>, чтобы захватить id (преобразование его из целого числа в строку по пути). Это нужно зайти в $() или получить ошибку .html is not a function. Таким образом, весь вызов:

$($('#email_address_<%= @email_address.id.to_s %>')).html("<%= escape_javascript(render 'email_address_form')%>");

Там нет необходимости связывать событие щелчка, так как кнопка является частью формы. По определению, при нажатии кнопки запускается метод контроллера (edit) и связанный с ним файл javascript (edit.js.erb).

Спасибо за помощь!

Answer 2

Вы можете добавить класс Div

<% @contact.email_addresses.each do |email_address| %> 
    <div class='your-class' id=<%= "email_address_"+email_address.id.to_s %>> 
    . 
    . do stuff 
    . 
    </div> 
<% end %> 

И в edit.js с помощью селектора класса вместо селекторе

$('.your-class').html("<%= escape_javascript(render 'email_address_form')%>") 

`

Answer 3

я бы добавить идентификатор на иконку img и объединить его в javascript уровне. Ваш HTML будет выглядеть следующим образом (я добавил идентификатор и класс на значок редактирования):

<div id="email_address_13"> 
    foo@bar.com 
    <div class="form_icon" title="edit email address" rel="tooltip" ,=""> 
     <a data-remote="true" href="/email_addresses/13/edit?contact_id=2"> 
      <img id="13" class="edit" height="11" width="11" src="/assets/mini_icons/fat_pencil.png" alt="Fat_pencil"> 
     </a> 
    </div> 
    <div class="form_icon" title="delete email address" rel="tooltip" ,=""> 
     <a rel="nofollow" data-remote="true" data-method="delete" data-confirm="Are you sure?" href="/email_addresses/13?contact_id=2"> 
      <img height="9" width="9" src="/assets/mini_icons/remove.png" alt="Remove"> 
     </a> 
    </div> 
</div> 

Теперь ваша функция редактирования JS будет выглядеть примерно так:

$(".edit").click(function() { 
    var id = $(this).id; 
    $('#email_address_' + id).html("<%= escape_javascript(render 'email_address_form')%>") 
});