如何使用 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 link 以某种方式传递 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'

这是我使用图像 link 到我的模态

的循环

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

您编写的代码如下：

  <%= 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 总是 return 第一个属性。

您可以改为这样做：

<% @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：我是临时写的，并没有实际测试。

Answer 2

好的，我找到了一种动态加载模式的方法 ajax。

我把我的 link_to 改成了这样

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

我在 pieces 控制器中做了这个改变

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 中删除，否则模态将保持呈现我单击的第一部分的属性。

如何使用 ajax 在 Rails 6 应用程序中显示 Bootstrap 4 模式？

How can I use ajax to display Bootstrap 4 modal in Rails 6 app?

ruby-on-rails

twitter-bootstrap

bootstrap-modal

bootstrap-4

ruby-on-rails-6