如何使用 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。 我想我需要一个模态.js.erb，里面有类似的东西

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

然后在库.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

<%= 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：我是即时编写的，实际上并没有对其进行测试。