Question

I have a nice modal showing a delete confirmation dialog each time user wants to delete data. The problem is many of my views render a list of elements in the template, and each element has its detail as well as a tiny delete red button. Of course in django the view passes a list of elements to the template, for example a list of clients, and they are rendered in a table like the following:

<table class="table table-striped">  
    <thead>  
      <tr>
        <th>Email</th>
      </tr>  
    </thead>  
    <tbody>
      {% for client in clientes %}
        <tr>  
          <td>{{ client.email }}</td>
          <td>
            <div class="btn-group">
              <!-- Delete button -->
              <a href="#myModal" class="btn btn-danger btn-mini" title="Eliminar">
                <i class="icon-trash icon-white"></i></a>
            </div>
          </td>
        </tr> 
      {% endfor %}
    </tbody>  

I would like to have a Bootstrap modal every time user presses on the delete-button to appear and confirm he is deleting some data. Now, I have managed to make the modal appear and delete the user, but not the correct user, modal somehow its only getting, or trying to delete the first user in the list. You can check my entire template with modal in the following link: FULL HTML

In the end, my problem is somehow related to passing the correct {{ client }} to the modal and not the first one on the list of clients, I’m supposing that happens because of the first declared modal on the for and then does not declare it anymore.

For example, I got 3 clients in the table:

[e-mail]         detele-button
[e-mail]         detele-button
[e-mail]         detele-button

No matter what client delete-button I press, it always shows the modal with client1 data, and actually erases it if press confirm delete.

Thank you.

edit1: href was not ok.

Answer 1

Found the answer for this, actually thanks to keithxm23.

Checking the generated HTML helped me get this correct. Actually every modal was being correctly generated the problem was that the id property of every modal was set to the same, in this case id="myModal", and the delete button had href="#myModal". the solution was to set the modal id property to a unique value throughout the document, I managed to do that by setting the modal id="{{client.pk}}" and the button href="#{{client.pk}}".