javascript - 在 Rails 6 上使用 Jquery 的引导模式
问题描述
我在索引页面中有一个项目列表,并且我在每个产品上添加了一个按钮,因此显示操作不是转到显示页面而是打开一个显示信息的模式。
为此,我创建了一个部分来呈现显示信息,但模式没有加载。在控制台中,错误指向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>
这是我的表演控制器:
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 %>
推荐阅读
- r - 用于拆分具有多个捕获组的单词列表的正则表达式
- python - 如何在正在运行的 docker 容器中执行 python 脚本?
- r - 如何在 R 中解析这种数据类型?
- c++ - 在 X64 Linux 中从用户级别使用 GS 寄存器
- javascript - 使用 append() 函数时重复的内容
- android - 什么是 gradlew 任务 assembleAndroidTest 以及 Android 中的测试应用程序是什么?
- java - 如何给 groovy 闭包参数一个类型
- reactjs - 使用 keyExtractor,仍然收到我的物品没有钥匙的警告
- java - 如何使用 Java 与 Eclipse 和 Maven 创建 Azure Web 作业?
- html - 在 NodeJS 中更改页面标题