Question

在我的应用中，我有一个表格，其中显示了用户发布的帖子列表。在每一行中，都有一个打开模态的按钮，显示已发送消息以响应该帖子的用户列表。我无法将正确的变量传递给模态。

如果我运行下面的@conversations循环，我用它来获取用户列表，在模态之外和行本身，它可以工作。但是当我尝试在模态中使用循环时，它使用第一行中的offer而不是offer用于单击按钮的行。

例如，如果我有一个包含以下标题的商品列表：

这是第一次报价。
这是第二次报价。
这是第三次报价。

在模态内运行的命令<% if reply.subject == offer.title %>将使用第一个offer.title，“这是第一个提议。”，即使我单击第三行中的按钮。因此，模态仅适用于第一行，然后在从任何其他行打开时显示相同的用户。

<% @offers.each do |offer| %>
        <tr>



          <td><%= link_to offer.title, offer_path(offer) %></td>


            <%= button_to offer_path(offer),
                          :id => 'contacts', "data-toggle" => "modal", 'data-target' => '#showContactsModal',
                          :class => 'btn btn-success', :style => "border-radius: 0;" do %>
                <i class="glyphicon glyphicon-ok"></i> View Users Who Contacted You
            <% end %>





            <div class="modal fade" id="showContactsModal">
              <div class="modal-dialog">
                <div class="modal-content">
                  <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">
                      <span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                    <h4 class="modal-title">
                      Who contacted you about this offer?</h4>
                  </div>
                  <div class="modal-body">

                    <% @conversations.each do |reply| %>
                        <% if reply.subject == offer.title %>
                            <%= reply.originator.name %>
                        <% end %>
                    <% end %>

                  </div>
                  <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Submit</button>
                  </div>
                </div>
                <!-- /.modal-content -->
              </div>
              <!-- /.modal-dialog -->
            </div>
            <!-- /.modal -->
          </td>
      </td>

   </tr>

<% end %>

如何解决这个问题，以便模态为其行接收正确的变量？

我刚刚注意到，在我的button_to中，我提供了商品展示视图的路径，这是不必要的，我只是想让它显示模态。我应该给它一个零路径吗？

随意编辑此问题，使其更加通用。

Answer 1

部分问题可能是由于代码中的某些格式不正确造成的。除此之外，我想到的另一件事是，由于你并没有为每一行中的每个模态使用唯一的ID（我相信你想要一个属于每一行的模态），你不能正确地替换内容。

<% @offers.each do |offer| %>
  <tr>
    <td>
      <%= link_to offer.title, offer_path(offer) %>
    </td>
    <td>
      <%= button_to offer_path(offer), :id => 'contacts', "data-toggle" => "modal", 'data-target' => '#showContactsModal_#{offer.id}', :class => 'btn btn-success', :style => "border-radius: 0;"%>
      <i class="glyphicon glyphicon-ok">View Users Who Contacted You</i>
    </td>
    <td>
      <div class="modal fade hide" id="showContactsModal_#{offer.id}">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal">
                <span aria-hidden="true">&times;</span>
                <span class="sr-only">Close</span>
              </button>
              <h4 class="modal-title">Who contacted you about this offer?</h4>
            </div>
            <div class="modal-body">
              <% @conversations.each do |reply| %>
                <% if reply.subject == offer.title %>
                  <%= reply.originator.name %>
                <% end %>
              <% end %>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
              <button type="button" class="btn btn-primary">Submit</button>
            </div>
          </div>
        </div>
      </div>
   </td>
  </tr>

<% end %>

Answer 2

您的模式在商品循环中使用相同的ID（showContactsModal）多次创建。您创建的按钮仅激活第一个模态，因为它正在调用该ID。

因此，data-target中的button_to需要设置为某个唯一值，例如：

<%= button_to offer_path(offer),
    :id => 'contacts', "data-toggle" => "modal", 
    'data-target' => '#showContactsModal_' + offer.id.to_s,
    :class => 'btn btn-success', :style => "border-radius: 0;" do %>
        <i class="glyphicon glyphicon-ok"></i> View Users Who Contacted You
<% end %>

然后在创建模态时，设置ID属性以匹配data-target：

<div class="modal fade" id="<%= 'showContactsModal_%s' % [offer.id] %>">
    <div class="modal-dialog">
        ...
    </div>
</div>

这样你的JS知道要向用户显示哪个模态。

将表行中的实例变量传递给模态

2 个答案: