如何使用 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_ 更改为这样

<%= 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 中删除，否则模态将保持渲染状态，并使用我单击的第一块的属性。