如何在Rails 6应用中使用ajax来显示Bootstrap 4模态？

Question

目前，我为页面上的每一个片段都渲染了一个模态，它可以工作，但我不想每次加载页面时都为每个片段渲染一个模态。它的工作原理是，但我不想每次加载页面时都为每一块渲染一个模态。

下面是我现在渲染模态的代码。

site/gallery.html.erb

<% @pieces.each_slice(3) do |pieces| %>
  <div class="row">
    <% pieces.each do |piece| %>
      <div class="col-lg-4">        
        <%= image_tag (piece.images.joins(:blob).order('active_storage_blobs.filename ASC').first if piece.images.attached?), data: { toggle: "modal", target: "#modal#{piece.id}" }, class:"img-thumbnail mx-auto d-block img-size" %>        
        <p><%= piece.name %></p>
        <p><%= piece.description %></p>
      <%= render 'site/modal', piece: piece %>
      </div>
    <% end %>
  </div>
<% end %>

这里是模态的部分。

site/_modal.html.erb

<div class="modal fade" id="modal<%=piece.id%>" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="modalLabel"><%= piece.name %></h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        //code involving video and images for the piece
      </div>
      <div class="modal-footer">
        <% if piece.quantity == 1 %>
          <%= button_to 'Purchase', checkout_create_path, method: :post, params: {id: piece.id}, remote: true, class:"btn btn-dark" %>
        <% else %>
          <p>SOLD</p>
        <% end %>
      </div>
    </div>
  </div>
</div>

我相信我需要做的是添加远程： true 然后通过我的image_tag链接传递片子的id。 我想我需要一个modal.js.erb，里面的内容大致是这样的

$('modal').html('<%= j render "site/modal", piece: @piece %>');
$('#modal<%=piece.id%>').modal('show');

然后在gallery.html.erb页面的顶部渲染模式。 但我不太清楚该怎么做。

编辑我在尝试使用AJAX来显示模态方面取得了一些进展，我把我的模态移到了pieces目录下，并创建了一个javascript文件来配合它。

_piece_modal.html.erb

<div class="modal fade" id="piece-modal" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      //modal content here
    </div>
  </div>
</div>

piece_modal.js.erb

$('body').append('<%= j render "piece_modal", piece: @piece %>');
$('#piece-modal').modal('show');

在我的pieces控制器中

def piece_modal
  @piece = Piece.find_by(params[:piece])
end

在我的路线中

get 'piece_modal' => 'pieces#piece_modal'

这里是我使用图片链接到我的模版的循环。

<% @pieces.each_slice(3) do |pieces| %>
  <div class="row">
    <% pieces.each do |piece| %>
      <div class="col-lg-4">
      <%= link_to piece_modal_path(piece), remote: true do %>        
        <%= image_tag (piece.images.joins(:blob).order('active_storage_blobs.filename ASC').first if piece.images.attached?), class:"img-thumbnail mx-auto d-block img-size" %>  
      <% end %>      
        <p><%= piece.name %></p>
        <p><%= piece.description %></p>
      </div>
    <% end %>
  </div>
<% end %>

现在模态显示了，但它只显示循环中第一张的图片。 当我点击不同的图片时，如何才能让它显示正确的内容？

Answer 1

好吧，我找到了一个方法，通过一些ajax动态加载模态。

我把我的link_to改成了这样

<%= link_to piece_modal_path(piece_id: piece.id), remote: true do %>

我在作品控制器中做了这样的改变

def piece_modal
  @piece = Piece.find(params[:piece_id])
end

我对我的 piece_modal.js.erb

$('body').append('<%= j render "piece_modal", piece: @piece %>');
$('#piece-modal').modal('show'); 

$('#piece-modal').on('hidden.bs.modal', function () {
  $(this).remove();
});

所以现在网站上的每一个作品都会呈现它自己的模态，而不是当我点击作品的图片时，只有一个模态会被呈现。 但在隐藏时，我必须从DOM中删除它，否则模态将以我点击的第一个作品的属性保持渲染。

Answer 2

你的代码写得很像。

  <%= image_tag (piece.images.joins(:blob).order('active_storage_blobs.filename ASC').first if piece.images.attached?), class:"img-thumbnail mx-auto d-block img-size" %> 

但请注意你用了 .first 它将总是返回第一个属性。

你可以做这样的事情来代替。

<% @pieces.each_slice(3) do |pieces| %>
  <div class="row">
    <% pieces.each_with_index do |piece, index| %>
      <div class="col-lg-4">
      <%= link_to piece_modal_path(piece), remote: true do %>        
        <%= image_tag (piece.images.joins(:blob).order('active_storage_blobs.filename ASC')[index] if piece.images.attached?), class:"img-thumbnail mx-auto d-block img-size" %>  
      <% end %>      
        <p><%= piece.name %></p>
        <p><%= piece.description %></p>
      </div>
    <% end %>
  </div>
<% end %>

ps: 我是临时写的，没有实际测试过。