如何使用 ajax 在 Rails 6 应用程序中显示 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>

我认为我需要做的是添加 remote: true 并以某种方式通过我的 image_tag 链接传递piece.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');

在我的碎片控制器中

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

p/s：我正在写这篇文章，并没有实际测试它。