I am creating spans in a jinja2 loop, when the user click on them, a modal should appear with a dynamic content . The dynamic item more specifically is the image of the map inside each modal : ``` ``` To avoid one static modal that will repeat itself within the loop, I added a dynamic `id` to the modal dialog : ``` ``` But it seems that this doesn't work . Here is my code : ``` Map <button type="button" class="close" data-dismiss="moda…

If your are in a loop, you must use different modal id, try : ``` Map × Lorem ipsum Lorem ipsum Close Save changes --> ```

Dynamic bootstrap modal within a loop

html, javascript, jinja2, twitter-bootstrap

Solution

If your are in a loop, you must use different modal id, try :

    <span style="cursor: pointer;" type="button" class="badge badge-white" data-toggle="modal" data-target="#myModal{{id}}">Map</span>
<!-- Modal -->
<div class="modal fade" id="myModal{{id}}" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog" id="{{id}}" >
    <div class="modal-content" >
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">Lorem ipsum<small>Lorem ipsum</small></h4>
      </div>
      <div class="modal-body text-center pagination-centered">
        <img src="http://maps.googleapis.com/maps/api/staticmap?markers=color:red%7Clabel:S%7C{{item.venue.latitude}},{{item.venue.longitude}}&zoom=17&size=400x400&sensor=false"/>
      </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 changes</button>-->
      </div>
    </div>
  </div>
</div>

Problem

I am creating spans in a jinja2 loop, when the user click on them, a modal should appear with a dynamic content . The dynamic item more specifically is the image of the map inside each modal : ``` <img src="http://maps.googleapis.com/maps/api/staticmap?markers=color:red%7Clabel:S%7C{{item.venue.latitude}},{{item.venue.longitude}}&zoom=17&size=400x400&sensor=false"/> ``` To avoid one static modal that will repeat itself within the loop, I added a dynamic `id` to the modal dialog : ``` <div class="modal-dialog" id="{{id}}" > ``` But it seems that this doesn't work . Here is my code : ``` <span style="cursor: pointer;" type="button" class="badge badge-white" data-toggle="modal" data-target="#myModal">Map</span>  <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog" id="{{id}}" > <div class="modal-content" > <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title" id="myModalLabel">Lorem ipsum<small>Lorem ipsum</small></h4> </div> <div class="modal-body text-center pagination-centered"> <img src="http://maps.googleapis.com/maps/api/staticmap?markers=color:red%7Clabel:S%7C{{item.venue.latitude}},{{item.venue.longitude}}&zoom=17&size=400x400&sensor=false"/> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>  </div> </div> </div> </div> ```

Original source