Question

我有一个记录表，每行包含一个使用大胆弹出宝石的编辑按钮。每当点击编辑按钮时，就会显示一个包含所点击记录信息的弹出窗体。不断发生的事情只是当点击表格中的任何编辑按钮时弹出表格的第一条记录。如何使按钮对表中的每一行（记录）都是唯一的？

非常感谢任何帮助。

查看文件：

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

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

感谢。

解决方案：

使用迈克尔的代码使用数据变量传递ID。我没有使用＃{a.id}，而是使用了Rails版本＆lt;％= a.id％＆gt;。谢谢你的帮助！

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

Rails Magnific Pop-Up与表行唯一编辑按钮

1 个答案: