代码之家 › 专栏 › 技术社区 › RoRails

Rails放大弹出窗口,带有表格行唯一编辑按钮

magnific-popup ruby-on-rails html jquery javascript

0

RoRails · 技术社区 · 9 年前

我有一个记录表,每行包含一个编辑按钮,使用放大弹出的宝石。每当单击编辑按钮时,都会显示一个弹出表单,其中包含单击的记录的信息。然而,当单击表中的任何编辑按钮时,只会弹出表的第一条记录。如何使按钮对表中的每一行(记录)唯一?

非常感谢您的帮助。

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

<%= 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>

1 回复 | 直到 9 年前

1

m3characters 9 年前

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