Ruby on Rails/Bootstrap: динамические данные в модальном

Question

Я начинаю с Ruby on Rails и задаюсь вопросом об использовании модального бутстрапа. Итак, моя проблема в том, что у меня есть таблица, и для каждой строки этой таблицы я делаю кнопку для отображения с модальной некоторой другой информацией об зависимых классах, но она отображает правильную информацию только для первой строки и тех же самых для всех других строк. Я хочу сделать его динамичным и соответствовать объекту, с которым он имеет дело.

 <table class="table table-hover table-condensed"> 
      <tr> 
      <th>Id</th> 
      <th>Name</th> 
      <th>Description</th> 
      <th>Priority</th> 
      <th>State</th> 
      <th></th> 
      <th></th> 
      </tr> 

     <% @user_stories.each do |user_story| %> 
      <tr> 
      <td><%= user_story.id %></td> 
      <td><%= user_story.name %></td> 
      <td><%= user_story.description %></td> 
      <td><%= user_story.priority %></td> 
      <td><%= user_story.state %></td> 

      <td> 
        <div class="btn-group"> 
         <a class="btn btn-primary">Options</a> 
         <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a> 
         <ul class="dropdown-menu"> 
          <li><%= link_to 'Show', user_story %></li> 
          <li class="divider"></li> 
          <li><%= link_to 'Edit', edit_user_story_path(user_story) %></li> 
          <li class="divider"></li> 
          <li> <%= link_to 'Destroy', user_story, :confirm => 'Are you sure?', :method => :delete %></li> 
         </ul> 
        </div> 
      </td> 
      <td> <a href="#myModal" role="button" class="btn" data-toggle="modal">Global View</a></td> 
      <div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
       <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
       <h3 id="myModalLabel">Golbal view : <%= user_story.name %></h3> 
       </div> 
       <div class="modal-body"> 
         <% us = user_story.functionalities %> 
         <% us.each do |f| %> 
         <span class="label label-info"><%= f.name %></span> 
         <% t = f.tasks%> 
         <br/> 
          <% t.each do |y| %> 
          <%= y.name %> 
          <% u = User.where(:id => y.user_id) %> 
          <%= u.collect {|p| ": #{p.first_name} #{p.last_name}"} %> 
          <br/> 
          <% end %> 
         <br/> 
         <% end %> 
       </div> 
       <div class="modal-footer"> 
       <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button> 

       </div> 
      </div> 
      </tr> 
     <% end %> 
     </table> 

Любые идеи, как исправить это?

Маршруты:

Backlog::Application.routes.draw do 
    resources :functionalities 

    resources :user_stories 

    resources :users 

    resources :tasks 
end 

Answer 1

Вы добавили модальность в каждой строке.

<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 

Но здесь для каждой строки идентификатор модальности такой же. Таким образом, вы получаете одинаковый диалог для каждой строки. Вам нужно сделать динамический идентификатор для модалов и везде, где вы используете id в модальном div.

<a href="#myModal<%= user_story.id%>" role="button" class="btn" data-toggle="modal">Global View</a> 
<div id="myModal<%= user_story.id%>" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
       <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
       <h3 id="myModalLabel<%= user_story.id%>">Golbal view : <%= user_story.name %></h3> 
       </div> 
       <div class="modal-body"> 
         <% us = user_story.functionalities %> 
         <% us.each do |f| %> 
         <span class="label label-info"><%= f.name %></span> 
         <% t = f.tasks%> 
         <br/> 
          <% t.each do |y| %> 
          <%= y.name %> 
          <% u = User.where(:id => y.user_id) %> 
          <%= u.collect {|p| ": #{p.first_name} #{p.last_name}"} %> 
          <br/> 
          <% end %> 
         <br/> 
         <% end %> 
       </div> 
       <div class="modal-footer"> 
       <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button> 

       </div> 
      </div>