Question

my scenario is Appengine/python/jinja/twitter-bootstrap and in this code…

{% for VMS in VEP.vms_set %}
<tr>
    <td>{{VMS.des}}</td>
    ...
    <td>{% include 'butt_vms.html' %}</td>
</tr>
{% endfor %}

butt_vms.html

<div class="modal" id="delvms">
    <div class="modal-header">
        <h3>Warning!</h3>
    </div>
    <div class="modal-body">    
        <p>Are you sure?</p>
    </div>
    <div class="modal-footer">
        <a class="btn btn-danger" href="delete?item={{ VMS.key() }}">delete</a>
        <a class="btn" href="#" data-dismiss="modal">No</a>
    </div>
</div>

<div class="btn-group"> 
    <a class="btn" href="delete?item={{ VMS.key() }}"><i class="icon-trash"></i></a>
    <a class="btn" data-toggle="modal" href="#delvms"><i class="icon-trash"></i></a>
</div>​

…i don’t know why this buttons work different: the first delete the related row (it’s ok) while the second delete ever and only the first row in the table.
Suggestions?

Answer 1

Well, it looks like every modal added to the page is going to have the same id="delvms". Based on that, I’m also guessing that your buttons for showing/hiding the modals aren’t keyed to a specific modal since they need to reference the modal by its id attribute with the data-target or href attribute on the button.

The Bootstrap Modal section here indicates that you can use the href or data-target attribute to toggle a modal, examples: data-target="#myModalId" or href="#myModalId".

So, you need to be building both the button href/data-target and modal id attributes during runtime to ensure that each button is linked to the correct modal.

P.S. an alternative to adding X number of modals to the page would be to add just one modal and build the button’s onclick attribute at run-time to call a custom function that sets the modal data according to the button that was clicked and then open the modal. I went this route, which is the only reason I’m offering it up as an alternative (not necessarily better) solution.