Bootstrap модель показывает тот же самый текст каждый раз

Question

Я использую самозагрузки модальный для показа всплывающего окна:

<% @yourphotos.each do |photo| %> 
    <!-- 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"><%= name %></h4> 
     </div> 
     <div class="modal-body"> 
      <p> 
      <% if photo.caption != nil %> 
      <%= photo.caption.text %> 
     <% else %> 
      nil text 
     <% end %>   
      </p> 
     </div> 
      <form class="navbar-form pull-left"> 
      <input type="text" class="span2"> 
      <button type="submit" class="btn">Comment</button> 
     </form> 
     <div class="modal-footer"> 
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     </div> 
     </div> 

    </div> 
    </div> 
     </div> 
    <% end %> 

Допустит, цикл I через выше, и есть 10 фотографий (в @yourphotos) мой caption.text в каждом из модалов, когда я запускаю одно и то же каждый раз, хотя, когда я смотрю на источник, я могу видеть 10 разных модальных титров .. это вещь JavaScript?

Answer 1

Как вы открываете модальный? Может быть, вы все время открываете то же самое модальное?

Answer 2

Попробуйте один из следующих (для бутстрапа 3). Он удалит загруженные данные перед открытием в следующий раз.

$(document).ready(function() { 
    $("#myModal").on('hidden.bs.modal', function() { 
     $(this).data('bs.modal', null); 
    }); 
}); 

Или

$(document).ready(function() { 
    $('#myModal').on('hidden.bs.modal', '.modal', function() { 
      $(this).removeData('bs.modal'); 
    }); 
}); 

Или

$(document).ready(function() { 
    $('#myModal').on('hidden.bs.modal', function() { 
      $(this).removeData('bs.modal'); 
    }); 
}); 

Reference Link