javascript - 使用 Jquery on Rails 6 的 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>

这是我的节目 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')

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

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