Error when adding a warning before deleting a django model record-CodePudding

I am looking to popup a model warning about the deletion of a model record, however when looping into a table, all links lead to delete the very first record in the table, what I am doing wrong?

Here is my code: #models:

class Company(models.Model):
    teamname = models.CharField(max_length=100,unique=True)
    address = models.CharField(max_length=300)
    office = models.CharField(max_length=100)

    def __str__(self):
        return self.teamname

    class Meta:
        ordering = ['teamname']

class Contact(models.Model):
        teamname = models.ForeignKey(Company,on_delete=CASCADE)
        firstname = models.CharField(blank=True,null=True,max_length=20)
        lastname = models.CharField(blank=True,null=True,max_length=20)
        position = models.CharField(max_length=30,choices=(
            ('Option1','Option1'),
            ('Option2','Option2'),
        ))
        cellphone = models.CharField(max_length=30,null=True,blank=True)
        email = models.EmailField(blank=True,null=True)
        birthday = models.DateField(blank=True,null=True)
    
        def __str__(self):
            return str('%s, %s' % (self.lastname, self.firstname))
    
        class Meta:
            ordering = ['id','position','lastname','firstname']

html/bootstrap code:

<table id="datatable" class="table table-bordered dt-responsive  nowrap w-100">
        <thead>
            <div style="text-align: center;" class="card-body">
                <h4>Contact list</h4>
            </div>
            <tr>
                <th style="text-align: center;">First name</th>
                <th style="text-align: center;">Last Name</th>
                <th style="text-align: center;">Position</th>
                <th style="text-align: center;">Cellphone</th>
                <th style="text-align: center;">Email</th>
                <th style="text-align: center;">Birthday</th>
                <th style="text-align: center;">Edit</th>
                <th style="text-align: center;">Delete</th>
            </tr>
        </thead>
        {% for j in obj2 %}
        <tbody>
            <tr>
                <td style="text-align: center;">{{j.firstname}}</td>
                <td style="text-align: center;">{{j.lastname}}</td>
                <td style="text-align: center;">{{j.position}}</td>
                <td style="text-align: center;">{{j.cellphone}}</td>
                <td style="text-align: center;"><a href="mailto:{{j.email}}">{{j.email}}</a></td>
                <td style="text-align: center;">{{j.birthday}}</td>
                <td style="text-align: center;"><a href="/clients/edit/contact/{{j.id}}" class="text-success"><i class="mdi mdi-pencil font-size-18"></i></a></td>
                <td style="text-align: center;">
                    <i style="color: red; font-size: 16px; cursor: pointer;" data-bs-toggle="modal" data-bs-target="#deleteRecord" class="bx bx-trash"></i>
                </td>
                <div class="modal fade" id="deleteRecord" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="staticBackdropLabel" aria-hidden="true">
                    <div class="modal-dialog modal-dialog-centered" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="staticBackdropLabel">¿Está seguro que desea proceder?</h5>
                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                            </div>
                            <div class="modal-body">
                                <p style="text-align: justify;">Data of contact {{j.nombre}} will not be recovered in the future.</p>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-light" data-bs-dismiss="modal">Cancel</button>
                                <button type="button" class="btn btn-danger">Proceed</button>
                            </div>
                        </div>
                    </div>
                </div>
            </tr>
            {% endfor %}
        </tbody>
    </table>

The problem is, when trying to delete any record in the table using the modal as a warning, the code triggers the details of the very first record and it works the deletion, but always the very first record, please help!

CodePudding user response：

adrian please make sure your are using bootstrap5 because as i can in your modal code u are using bootstrap5 modal

for bootstarp4

<div class="modal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>Modal body text goes here.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

and for bootstarp version 5 use this

<div class="modal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <p>Modal body text goes here.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

CodePudding user response：

I found another post and this is solved by adding the id for the modal trigger and the target modal:

<td style="text-align: center;"><i style="color: red;cursor: pointer;" data-bs-toggle="modal" data-bs-target="#deleteRecord**{{i.id}}**" class="bx bx-trash"></i></td>

<div class="modal fade" id="deleteRecord**{{i.id}}**" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="staticBackdropLabel" aria-hidden="true">...