CODEWITHSUNDEEP
djangotwitter-bootstrapbootstrap-modal
AGA
AGA

Reputation: 61

Bootstrap modal, django for loop and model

I am quite new to both Django and Bootstrap. I am currently trying to get a bootstrap modal window working inside a for loop in my Django template that would display some data coming from a model.

I have therefore created a for loop that covers both the button creation and the modal window and which iterates over the data contained in my model. It should therefore create as many buttons and corresponding modal windows as entries in my model.

However, when I click on any button created through the for loop, the modal window always display the first entry and never changes.

I have tried to find an answer and I have mainly looked at the following topics:

Passing value to Bootstrap modal in Django

Twitter bootstrap remote modal shows same content everytime

This works perfectly outside a loop when I create different modal and buttons related with a unique ID but I couldn't make it work in my case.

I hope to be precise enough.

Thanks for your help.

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

("button trigger modal" and "modal" code comes from bootstrap.com so it should be right)

Upvotes: 3

Views: 2867

Answers (1)

AGA
AGA

Reputation: 61

Ok I have understood what went wrong. The ID I was trying to use was text and not a number I think, so simple in the end. I have finally used the id field of my model and it works perfectly. Thanks to you, rajasimon, for giving the right direction!

Upvotes: 3

Related Questions