display показать данные действия в модальных всплывающих рельсах

Question

Я пытаюсь поместить данные действия шоу в модальное всплывающее окно. В представлении есть таблица данных клиентов, каждый раз, когда я нажимаю кнопку «Показать», он отображает данные первого клиента во всплывающем окне. Мне нужна помощь в том, как и где ставить цикл, чтобы каждый раз я мог обращаться к различным релевантным данным.

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

Answer 1

Вы не можете поставить div элемент внутри tr. Также в вашем случае вам нужно несколько модалов, и вам нужно что-то уникальное для идентификации соответствующего модального. Добавляя id client к модальному 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 больше и повлияет на время загрузки. Я предлагаю вам написать modal вне цикла и использовать javascript для изменения значений в модальном.