javascript - Rails 放大弹出窗口，带有表行独特的编辑按钮

Question

我有一个记录表，每行都包含一个使用放大的弹出 gem 的编辑按钮。每当单击编辑按钮时，都会显示一个弹出表单，其中包含单击的记录的信息。但不断发生的情况是，当单击表中的任何编辑按钮时，只会弹出表的第一条记录。如何使按钮对于表中的每一行(记录)都是唯一的？

非常感谢任何帮助。

查看文件:

<div class="row">
<div class="col-md-12">
  <div class="table-responsive">
    <table class="table table-bordered table-striped table-hover">
      <tr>
        <th>Position</th>
        <th>Title</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Edit</th>
        <th>Delete</th>
      </tr>
      <% begin %>
        <% @administration.each do |a| %>
            <tr>
              <td><%=a.position.name rescue nil%></td>
              <td><%=a.title.letters%></td>
              <td><%=a.first_name%></td>
              <td><%=a.last_name%></td>
              <td>
                <button type="button" name="button" href="#modal-popup" class="open-popup-link" >Edit</button>
                <div id="modal-popup" class="white-popup mfp-hide">
                  <%= render 'managers/parts/administration_form', locals: {model: a} %>
                </div>
              </td>
              <td><%=button_to "X", destroy_administration_path(admin_id: a), method: 'delete'%></td>
            </tr>
        <%end%>
      <% rescue %>
        <% nil %>
      <% end %>
    </table>
  </div>
</div>

_administration_form部分

<%= form_for locals[:model], url: update_parts_path, html: {method: :post} do |f| %>
  <%=hidden_field_tag "id", locals[:model].try(:id)%>

  <div>
    <label>Position</label>
    <%= f.select :position_id,  content_tag(:option,'None',:value=>"") + options_from_collection_for_select(Position.select(:id, :name), 'id', 'name') %>
  </div>
  <div>
    <label>Title</label>
    <%= f.select :title_id, options_from_collection_for_select(Title.select(:id, :letters), 'id', 'letters') %>
  </div>
  <div>
    <label>First Name</label>
    <%= f.text_field :first_name, class: "form-control" %>
  </div>
  <div>
    <label>Last Name</label>
    <%= f.text_field :last_name, class: "form-control" %>
  </div>
  <div>
    <label>Image</label>
    <%= f.file_field :image, :onchange => "readURL(this, \'logo_prev\');" %>
    <img id="logo_prev" src="<%=locals[:model].image.url || '#'%>" alt="logo image" />
  </div>
  <br>
  <%= f.submit_tag "Submit" %>
<% end %>

JavaScript

  $('.open-popup-link').magnificPopup({
    type:'inline',
    midClick: true 
  });

谢谢。

<小时/>

解决方案:

使用 Michael 的代码通过数据变量传递 ID。我没有使用 #{a.id}，而是使用了 Rails 版本 <%=a.id%>。感谢您的帮助!

<a href="#modal-popup-<%=a.id%>" class="open-popup-link" data-mfp-src="#modal-popup-<%=a.id%>">Edit</a>
<div id="modal-popup-<%=a.id%>" class="white-popup mfp-hide">
    <%= render 'managers/parish_parts/parish_administration_form', locals: {model: a} %>
</div>

Answer 1

你可以这样写:

<a data-mfp-src="#modal-popup-#{a.id}" href="#modal-popup-#{a.id}" class="open-popup-link" >Edit</button>
<div id="modal-popup-#{a.id}" class="white-popup mfp-hide">
  <%= render 'managers/parts/administration_form', locals: {model: a} %>
</div>

您需要一个<a>标签和单一 ID。

根据文档，这应该按原样工作，除非必须在每个元素上调用初始化。

如果这是您可以尝试的问题:

$.each($('.open-popup-link'), function() {
  $(this).magnificPopup({
    type:'inline',
    midClick: true 
  });
});

文档还提到了通过数据属性传递弹出窗口 ID 的另一种方法:

<a href="#modal-popup-#{a.id}" class="open-popup-link" data-mfp-src="#modal-popup-#{a.id}">

如果这些都不起作用，您可以手动完成

  $.each($('.open-popup-link'), function() {
    $(this).on('click', function() {
      var target = $(this).attr('href');
      $.magnificPopup.open({
        items: {
          src: target,
          type: 'inline'
        }
      }, 0);
    });
  });