Question

我有一张父记录表。在每一行的末尾，我有一个图标弹出一个包含其子项的fields_for的模态。但我的模态总是显示表格中第一条记录的fields_for。

_form.htm.erb

<%= object.fields_for :categories do |category| %>
        <tr>
          <td>
            <div class="form-inline">
              <%= category.input :name %>
            </div>
          </td>
          <td>
            <div class="col-lg-2">
              <%= category.number_field :default_percentage %>
            </div>
          </td>

          <td></td>

          <td>
            <%= render 'product_fields', object: category, %>
          </td>
        </tr>
      <% end %>

_product_fields.html.erb：

<span class="glyphicon glyphicon-eye-open" data-target="#myModal" data-toggle="modal"></span>
<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog modal-lg">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title"><p align="center">Produits disponibles</p></h4>
      </div>
      <div class="modal-body">
        <table class="table">
          <thead>
          <tr>
            <th>Actif</th>
            <th>Produit</th>
            <th>Prix forfaitaire</th>
            <th>Pourcentage</th>
            <th>Fixe</th>
          </tr>
          </thead>
          <tbody>
          <%= object.fields_for :products do |product| %>
            <tr>
              <td class="col-md-0">
                <%= product.input :active, input_html: { checked: true }, label: false %>
              </td>
              <td class="col-md-6">
                <%= product.input :name, label: false, readonly: true %>
              </td>
              <td class="col-md-2">
                <%= product.input :flat_fee, label: false %>
              </td>
              <td class="col-md-2">
                <%= product.input :percentage, label: false %>
              </td>
              <td class="col-md-2">
                <%= product.input :price, label: false %>
              </td>
            </tr>
          <% end %>
          </tbody>
        </table>
      </div>
      <div class="modal-footer">
        <button type="reset" class="btn btn-default">Annuler</button>
        <button type="submit" class="btn btn-primary" data-dismiss="modal">Valider</button>
      </div>
    </div>
  </div>
</div>

有关如何更新模态以显示正确的fields_for的任何想法？（我对JQuery或JS非常缺乏经验，我觉得这样做的方式）

由于

解答：

通过使用如下索引指定目标和id，我已经能够让每一行弹出具有不同内容的相同模态：

<button type="button" data-toggle="modal" data-target="#<%= index %>">Modal</button>

        <div class="modal fade" id="<%= index %>" role="dialog">
          <div class="modal-dialog">
            <!-- Modal content-->
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Produits disponibles</h4>
              </div>
              <div class="modal-body">
                <p> content of modal here </p>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
              </div>
            </div>
          </div>
        </div>

Answer 1

案例1

在HTML中，不应重复ID元素。正如您在此处所提到的，您可能有更多弹出窗口具有相同的ID attribute。
- 因此，无论是用户使用相同型号还是更改每个型号的ID。

案例2

每次传递给object/locals的{{1}}都相同。

愿你能解决问题。

Answer 2

这对于ERB来说有点棘手，当你进行任何循环时，你永远不会想要ERB打印标签，只需要解释器标签。即你想改变这个

<%= object.fields_for :categories do |category| %>

到这个

<% object.fields_for :categories do |category| %>

Rails Bootstrap模式框始终显示第一条记录

2 个答案: