Rails Magnific Pop-Up with Table Rows獨特的編輯按鈕

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局部

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