Rails 带有 Table 行唯一编辑按钮的宏伟弹出窗口

Question

我有 table 条记录，每行都包含一个使用放大弹出窗口 gem 的编辑按钮。每当单击编辑按钮时，它都会显示一个包含单击记录信息的弹出窗体。但是，当单击 table 中的任何编辑按钮时，只会弹出 table 的第一条记录。如何使 table 中每一行（记录）的按钮唯一？

非常感谢任何帮助。

查看文件：

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

Rails 带有 Table 行唯一编辑按钮的宏伟弹出窗口

Rails Magnific Pop-Up with Table Rows Unique Edit Button

html

javascript

jquery

ruby-on-rails

magnific-popup