display在模态弹出轨道中显示动作数据

时间:2016-05-06 07:09:29

标签: ruby-on-rails

我试图将show action数据放在模态弹出窗口中。在视图中有一个客户端数据表,每当我点击show按钮时它会弹出第一个客户端的数据。我需要有关如何以及在何处放置循环的帮助,以便每次我都可以访问不同的相关数据。

This is the code

<% @clients.each do |client| %>
<tr class="even pointer">
    <td class="a-center "><%= client.name %></td>
    <td class="a-center "><%= truncate(client.email, :length => 15)%></td>
    <td class="a-center "><%= client.mobile_number %></td>
    <td class="a-center "><%= client.car_model %></td>
    <td class="a-center "><%= client.date_of_purchase.try(:strftime , '%d %b %Y') %></td>
    <td class="a-center "><%= client.insurance_expiry_date.try(:strftime , '%d %b %Y') %></td>
    <td class="a-center "><%= client.warranty_expiry_date.try(:strftime , '%d %b %Y') %></td>
    <td class="a-center "><%= client.lifestyle_manager_name %></td>
    <td class="a-center "><%= truncate(client.lifestyle_manager_email, :length => 15) %></td>
<td class="a-center "><%= client.lifestyle_manager_mobile_number %></td>
<td><a href="#" data-toggle="modal" data-target="#myModal">Show</a><td>
<!-- Modal -->
<div class="modal fade" id="myModal" 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">Client</h4>
                                                            </div>
                                                            <div class="modal-body">
                                                                <p>
                                                                    <strong>Name:</strong>
                                                                    <%= client.name %>
                                                                </p>
                                                                <p>
                                                                    <strong>Email:</strong>
                                                                    <%= client.email %>
                                                                </p>
                                                                <p>
                                                                    <strong>Mobile number:</strong>
                                                                    <%= client.mobile_number %>
                                                                </p>
                                                                <p>
                                                                    <strong>Car model:</strong>
                                                                    <%= client.car_model %>
                                                                </p>
                                                                <p>
                                                                    <strong>Date of purchase:</strong>
                                                                    <%= client.date_of_purchase %>
                                                                </p>
                                                                <p>
                                                                    <strong>Insurance expiry date:</strong>
                                                                    <%= client.insurance_expiry_date %>
                                                                </p>
                                                                <p>
                                                                    <strong>Warranty expiry date:</strong>
                                                                    <%= client.warranty_expiry_date %>
                                                                </p>
                                                                <p>
                                                                    <strong>Lifestyle manager name:</strong>
                                                                    <%= client.lifestyle_manager_name %>
                                                                </p>
                                                                <p>
                                                                    <strong>Lifestyle manager email:</strong>
                                                                    <%= client.lifestyle_manager_email %>
                                                                </p>
                                                                <p>
                                                                    <strong>Lifestyle manager mobile number:</strong>
                                                                    <%= client.lifestyle_manager_mobile_number %>
                                                                </p>
                                                            </div>
                                                            <div class="modal-footer">
                                                                <button type="button" class="btn btn-default" data-dismiss="modal">
                                                                    Close
                                                                </button>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>  

                                                    <td><%= link_to 'Edit', edit_client_path(client) %></td>
                                                <td><%= link_to 'Delete', client, method: :delete, data: { confirm: 'Are you sure?' } %></td>

                                                </td>
                                                </td>
                                            </tr>
                                            <% end %>

1 个答案:

答案 0 :(得分:2)

您无法在div内放置tr元素。同样在你的情况下,你需要一些模态,你需要一些东西来唯一地识别相应的模态。将client id附加到模态ID,您可以使其正常工作。

<% @clients.each do |client| %>
  <tr class="even pointer">
    <td class="a-center "><%= client.name %></td>
    <td class="a-center "><%= truncate(client.email, :length => 15)%></td>
    <td class="a-center "><%= client.mobile_number %></td>
    <td class="a-center "><%= client.car_model %></td>
    <td class="a-center "><%= client.date_of_purchase.try(:strftime , '%d %b %Y') %></td>
    <td class="a-center "><%= client.insurance_expiry_date.try(:strftime , '%d %b %Y') %></td>
    <td class="a-center "><%= client.warranty_expiry_date.try(:strftime , '%d %b %Y') %></td>
    <td class="a-center "><%= client.lifestyle_manager_name %></td>
    <td class="a-center "><%= truncate(client.lifestyle_manager_email, :length => 15) %></td>
    <td class="a-center "><%= client.lifestyle_manager_mobile_number %></td>
    <td><a href="#" data-toggle="modal" data-target="#myModal-<%= client.id %>">Show</a><td>
    <td><%= link_to 'Edit', edit_client_path(client) %></td>
    <td><%= link_to 'Delete', client, method: :delete, data: { confirm: 'Are you sure?' } %></td>
    </td>
    </td>
  </tr>
  <!-- Modal -->
  <div class="modal fade" id="myModal-<%= client.id %>" 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">Client</h4>
        </div>
        <div class="modal-body">
          <p>
            <strong>Name:</strong>
            <%= client.name %>
          </p>
          <p>
            <strong>Email:</strong>
            <%= client.email %>
          </p>
          <p>
            <strong>Mobile number:</strong>
            <%= client.mobile_number %>
          </p>
          <p>
            <strong>Car model:</strong>
            <%= client.car_model %>
          </p>
          <p>
            <strong>Date of purchase:</strong>
            <%= client.date_of_purchase %>
          </p>
          <p>
            <strong>Insurance expiry date:</strong>
            <%= client.insurance_expiry_date %>
          </p>
          <p>
            <strong>Warranty expiry date:</strong>
            <%= client.warranty_expiry_date %>
          </p>
          <p>
            <strong>Lifestyle manager name:</strong>
            <%= client.lifestyle_manager_name %>
          </p>
          <p>
            <strong>Lifestyle manager email:</strong>
            <%= client.lifestyle_manager_email %>
          </p>
          <p>
            <strong>Lifestyle manager mobile number:</strong>
            <%= client.lifestyle_manager_mobile_number %>
          </p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">
            Close
          </button>
        </div>
      </div>
    </div>
  </div>
<% end %>

虽然我不建议将模态放在循环中。它会使html更大,并会影响加载时间。我建议你在循环外编写模态,并使用javascript修改模态中的值。