Bootstrap modal, django for loop и модель

Я совершенно новый и для Django, и для Bootstrap. В настоящее время я пытаюсь получить модальное окно bootstrap, работающее внутри цикла for в моем шаблоне Django, в котором будут отображаться некоторые данные, поступающие из модели.Bootstrap modal, django for loop и модель

Поэтому я создал цикл for, который охватывает как создание кнопки, так и модальное окно и которое выполняет итерацию над данными, содержащимися в моей модели. Поэтому он должен создавать столько кнопок и соответствующих модальных окон, сколько записей в моей модели.

Однако, когда я нажимаю на любую кнопку, созданную в цикле for, модальное окно всегда отображает первую запись и никогда не изменяется.

Я пытался найти ответ, и я в основном смотрел на следующие темы:

Passing value to Bootstrap modal in Django

Twitter bootstrap remote modal shows same content everytime

Это отлично работает вне цикла, когда я создавать различные режимные и кнопки, связанные с уникальный идентификатор, но я не мог заставить его работать в моем случае.

Надеюсь быть достаточно точным.

Благодарим за помощь.

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
    <title>Remote file for Bootstrap Modal</title> 

    <!--CSS--> 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> 

    <!--jquery--> 
    <script src="http://code.jquery.com/jquery.min.js"></script> 

    <!--JS--> 
    <script src="http://getbootstrap.com/dist/js/bootstrap.js"></script> 


</head> 
<body> 

      <div class="row"> 
      {% for name in activities %} 
      <div class="col-md-3"> 
      <div class="thumbnail"> 
       <img src="#" > 
      </div> 
      <p>Location: {{name.aregion}}</p> 
      <p> 

       <!-- Button trigger modal --> 
       <button class="btn btn-primary btn-xs" data-toggle="modal" data-target="#myModal"> 
       Read More 
       </button> 

       <!-- Modal --> 
       <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
       <div class="modal-dialog"> 
        <div class="modal-content"> 
        <div class="modal-header"> 
         <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button> 
         <h4 class="modal-title" id="myModalLabel">{{name.aname}}, {{name.aregion}}, {{name.acountry}}</h4> 
        </div> 
        <div class="modal-body"> 
         ... 
        </div> 
        <div class="modal-footer"> 
         <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
         <button type="button" class="btn btn-primary">Save</button> 
        </div> 
        </div> 
       </div> 
       </div> 
      </p> 
      </div> 
      {% endfor %} 
      </div> 

</body> 
</html>

(«Пусковая кнопка модальный» и «модальный» код приходит от bootstrap.com поэтому он должен быть правильным)

источник

2014-09-25 AGA

т.к. ваш id такой же. Измените свой идентификатор непрерывно, или jquery поможет вам решить –

Хорошо, я понял, что пошло не так. Идентификатор, который я пытался использовать, был текст, а не номер, который я думаю, настолько простой в конце. Я, наконец, использовал поле id моей модели, и он отлично работает. Спасибо вам, раджасимон, за правильное направление!

источник

2014-09-25 18:01:42 AGA

ответ

Смежные вопросы