在 Rails 6 上使用 Jquery 的 Bootstrap 模态

Question

我在索引页面中有一个项目列表，并且我在每个产品上添加了一个按钮，因此显示操作而不是转到显示页面会打开一个带有显示信息的模式。

为此，我创建了一个部分来呈现节目信息，但没有加载模式。 在控制台中，错误指向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">&times;</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')

如果我不使用渲染，而是将模态添加到索引页面，它可以工作，但无论我单击哪个产品，它始终显示第一个产品的信息。 这就是为什么我试图仅使用该产品的数据呈现部分。

Answer 1

您需要处理每个模态的唯一性。

尝试这个 ：

<%= 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">&times;</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 %>