我在索引页面中有一个项目列表,我在每个产品上都添加了一个按钮,因此显示操作不会转到显示页面,而是打开一个包含显示信息的模式。
为此,我创建了一个部分来呈现显示信息,但模态未加载。在控制台中,错误指向 show.erb
文件而不是渲染。
这是我的索引页:
<tbody>
<% @shopifyproducts.each do |shopifyproduct| %>
<tr>
<td><img height=75 src=<%= shopifyproduct.image %> /></td>
<td><%= shopifyproduct.sku %></td>
<td><%= shopifyproduct.title %></td>
<td>$ <%= shopifyproduct.price %></td>
<td><span>
<input class="form" type="text" name="dwtoys" form="myform" value=<%=shopifyproduct.inventory.to_i%> />
<%= link_to 'Add', shopifyproduct, {:remote => true, 'data-toggle' => "modal", 'data-target' =>
'#exampleModal', class: 'btn btn-primary btn-lg'} %>
</td>
<td><%= link_to 'Show', shopifyproduct %></td>
<td><%= link_to 'Edit', edit_shopifyproduct_path(shopifyproduct) %></td>
<td><%= link_to 'Destroy', shopifyproduct, method: :delete, data: { confirm: 'Are you sure?' } %></td>
</tr>
<% end %>
</tbody>
这是我的_show.html.erb页面
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<%= @shopifyproduct.title %>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
这是我的节目 Controller :
def show
respond_to do |format|
format.html
format.js
end
end
最后是 application.js
文件:
$("#myModal").find(".modal-content").html("<%= j (render 'show') %>");
$('#myModal').on('shown.bs.modal', function () {
$('#myInput').trigger('focus')
如果我不使用渲染,而是将模式添加到索引页面,它可以工作,但无论我点击哪个产品,它总是显示第一个产品的信息。这就是为什么我试图只使用该产品的数据渲染成一个部分。
最佳答案
您需要为每个模态处理单一性。
试试这个:
<%= link_to 'Add', shopifyproduct, {:remote => true, 'data-toggle' => "modal", 'data-target' =>
'#exampleModal-<%= shopifyproduct.id %>', class: 'btn btn-primary btn-lg'} %>
并且每个 shopifyproduct 都应该有自己的模态:
<% @shopifyproducts.each do |shopifyproduct| %>
<!-- Modal -->
<div class="modal fade" id="exampleModal-<%= shopifyproduct.id %>" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<%= shopifyproduct.title %>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<% end %>
关于javascript - 使用 Jquery on Rails 6 的 Bootstrap 模式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64197087/