我试图将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">
×
</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 %>
答案 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">×</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修改模态中的值。