Как использовать идентификатор записи базы данных Rails в качестве селектора с jQuery-UI?

Question

Я заполняю таблицу на основе итераций записей базы данных, используя цикл ".each do".Я хочу, чтобы у каждой таблицы cel было диалоговое окно jQuery-UI, которое может запускаться при нажатии кнопки cel.Проблема в том, что при нажатии одного cel, поскольку все они используют одну и ту же функцию, он запускает сотни диалоговых окон.

Я знаю, это потому, что я использую селектор класса (class = "opener"), но селектор идентификаторов тоже не работает, я думаю, потому что есть сотни таблиц, которые разделяют идентификатор.

<table>
  <!-- Loop for each iteration of User -->
  <% @users.each do |user| %>
  <tr>
    <!-- The email address for current iteration of User -->
    <th style="padding:2.5px;" colspan="5">
      <%= user.email %>
    </th> 
    <!-- Loop for each iteration of a Field for User -->
    <% user.fields.reverse_each do |field| %>
    <td>
      <button class="opener"> Click to open dialog </button>
      <!--  When clicked, it should show a dialog box -->
      <div class="dialog" title="Dialog Title">
        <p>Dialog Content</p>       
      </div>
    </td>
    <!-- End of Field iterations -->
    <% end %>
  </tr>
  <!-- End of User iterations -->
  <% end %>
</table>

jQuery-UI:

$(document).ready( function () {
  //= To prevent dialog box from opening automatically
  $( ".dialog" ).dialog({ autoOpen: false });

  //= Click HTML element with class ".opener" to open dialog boxes
  $(".opener").click(function () {
    //= Function for dialog box
    $( ".dialog" ).dialog( "open" );
  });
});

Что я хочуДля этого нужно присвоить имя классу тега или даже идентификатору тега как «<% = field.id%>» для каждой итерации цикла, чтобы каждый сгенерированный тег td (class / id) был уникальным для этой итерации записи.Я знаю, что эти теги Rails получают правильные значения базы данных в HTML, потому что я проверил, я просто не знаю, как вызывать его в функциях jQuery-UI.Ничто из того, что я пробовал, не работает на этом фронте (this.className / this.attr).Должен ли я сделать реализацию AJAX или JSON.Если да, то как бы я поступил так?

С другой стороны, кто-нибудь знает, будет ли Vue.js лучше для того, что я пытаюсь сделать?

Спасибо за любыепомощь!

Answer 1

У вас есть несколько контейнеров (<td> s в вашем случае), и внутри каждого контейнера есть кнопка (.opener) и диалоговое окно (.dialog).

Вероятно, проще всего это сделатьначните с кнопки, перейдите вверх по DOM к контейнеру, используя closest, а затем вернитесь в диалоговое окно, используя find:

$(".opener").click(function(ev) {
  let container = $(ev.currentTarget).closest('td'); // Or put a class on the <td> and use closest('.the_class_you_used')
  let dialog    = container.find('.dialog');
  dialog.dialog('open');
});

Это все, что вам нужно, если содержимое диалога статично.Вам не нужен field.id, если кнопка и диалог находятся в общем элементе контейнера, а другие кнопки или диалоги не находятся в этом контейнере.

Если вам что-то нужно field.id для чего-либо (скажем, AJAX-запрос для заполнения диалогового окна), тогда вы можете поместить атрибут данных в <td>:

<% user.fields.reverse_each do |field| %>
  <td data-field-id="<%= field.id %>">

, а затем захватить его своим JavaScript:

$(".opener").click(function(ev) {
  let container = $(ev.currentTarget).closest('td');
  let field_id  = container.data('field-id');

Вы также можетескажем let field_id = container.attr('data-field-id'), если вы не хотите, чтобы jQuery пытался интерпретировать значение атрибута.

---

Если вы уже используете jQuery и jQuery-ui, то переключение на Vue будет большой работой длятолько одна маленькая особенность.