CODEWITHSUNDEEP
javascripthtmltwitter-bootstrapjinja2
4m1nh4j1
4m1nh4j1

Reputation: 4356

Dynamic bootstrap modal within a loop

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>
<!-- Modal -->
<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">&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>

Upvotes: 3

Views: 14657

Answers (3)

Anup Kumar
Anup Kumar

Reputation: 81

If Anyone is still looking for a solution then try the following code (Note: I have done it in PHP as you can see php block there in code.) this it will work for sure

<?php
  $id=0;//define on the top of your function
    
   foreach()                     
<button type="button" class="btn-link" data-toggle="modal" data-target="#myModal<?php echo $id;?>">Read More</button></div>
                       
                       <div id="myModal<?php echo $id;?>" class="modal fade" role="dialog">
                            <div class="modal-dialog"> <!-- Modal content-->
                                    <div class="modal-content">
                                   //Popup content
                                     </div>

                            </div>
                      </div>

$id=$id+;//increase id value by for next iteration?>
endforech;

Upvotes: 0

Irfan wani
Irfan wani

Reputation: 5075

I think i figured this out.Don't keep id as a number but add some random text in front. e.g; id="#modal{{ id }}". I was also caught in this problem and this solved it. I just made a check by console logging the element with id='{{ id }}' and it was showing error on the console but when i added some text like id='modal{{ id }}', it worked perfectly.

Upvotes: 1

S&#233;bastien - V&#233;lhost
S&#233;bastien - V&#233;lhost

Reputation: 664

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>

Upvotes: 11

Related Questions