7

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:

client1@something.com         detele-button
client2@something.com         detele-button
client3@something.com         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.

Bart
  • 19,692
  • 7
  • 68
  • 77
PepperoniPizza
  • 8,842
  • 9
  • 58
  • 100
  • Did you check in the generated HTML if the url generated at ` – keithxm23 Oct 31 '12 at 22:59
  • yeah, sorry, that line was not correct it was just for example, I have edited it and FULL HTML shows my exact HTML. Thank you – PepperoniPizza Oct 31 '12 at 23:02
  • I meant to ask about the HTML that is generated in your browser after trying to load the page. The one that does not contain Django's template tags. In there, are the hrefs uniquely generated for each client. – keithxm23 Oct 31 '12 at 23:10
  • No, in the list, each client is shows properly, but the modal has just the first client data. – PepperoniPizza Oct 31 '12 at 23:26
  • 1
    Can you paste your generated HTML and Javascript code in a [jsfiddle](http://jsfiddle.net/) . The code without the django template tags. – keithxm23 Oct 31 '12 at 23:29
  • Sorry for late answer. Indeed I checked for the generated HTML and manage to figure out that my problem was with the id tag in the modal. I solved it. Thank you. The id generated was the same for everytime the modal appeared, so using {{client.pk}} as the id property solved it. – PepperoniPizza Nov 05 '12 at 16:43
  • 1
    If you solved something, make it an answer and accept it. Don't add [solved] to your title. – Bart Nov 05 '12 at 16:45

2 Answers2

12

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}}".

PepperoniPizza
  • 8,842
  • 9
  • 58
  • 100
0

@Prachi Sharma

its probably because you're using integers, in css identifiers cannot start with a digit, two hyphens, or a hyphen followed by a digit. You can try id="letter or word{{client.pk}}" href="#letter or word{{client.pk}}"

Tinashe Nyakutetepa
  • 1
  • 2