The delete view doesn't erase the correspondent object - django

Question

I'm developing the backend of my personal blog and I've create a view that delete a single tag of the post.
views.py
from django.shortcuts import get_object_or_404, redirect, render
from django.utils.text import slugify
from .forms import BlogTagForm
from .models import BlogTag
def deleteBlogTag(request, slug_tag):
if request.method == 'POST':
tag = BlogTag.objects.get(slug_tag=slug_tag)
tag.delete()
return redirect('tag_list')
models.py
from django.db import models
from django.urls import reverse
class BlogTag(models.Model):
tag_name = models.CharField(
'Tag',
max_length=50,
help_text="Every key concept must be not longer then 50 characters",
unique=True,
)
slug_tag = models.SlugField(
'Slug',
unique=True,
help_text="Slug is a field in autocomplete mode, but if you want you can modify its contents",
)
def __str__(self):
return self.tag_name
def get_absolute_url(self):
return reverse("single_blogtag", kwargs={"slug_tag": self.slug_tag})
class Meta:
ordering = ['tag_name']
urls.py
path("tags/", views.listTagAdmin, name='tag_list_admin'),
path("create-tag/", views.createBlogTag, name='create_tag'),
path("update-tag/<str:slug_tag>/", views.updateBlogTag, name='update_tag'),
path("delete-tag/<str:slug_tag>/", views.deleteBlogTag, name='delete_tag'),
tag_list.html
<table class="table table-striped">
<thead class="bg-secondary text-white">
<tr>
<th colspan="3"><h1 class="text-center"><strong>Tag List</strong></h1></th>
</tr>
<tr>
<th colspan="1">Tag</th>
<th colspan="1">Related Posts</th>
<th class="text-center" colspan="1">Actions</th>
</tr>
</thead>
<tbody>
{% for tag in tag_list %}
<tr>
<td colspan="1">{{ tag.tag_name }}</td>
<td colspan="1">{{ tag.tag_blogpost.count }}</td>
<td colspan="1">
<div class="row justify-content-md-center">
<a class="btn btn-success btn-sm mx-1" href="{% url 'update_tag' slug_tag=tag.slug_tag %}">Update</a>
<button class="btn btn-danger btn-sm mx-1" type="button" data-toggle="modal" data-target="#deleteModal">Delete</button>
<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="deleteModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h2 class="modal-title text-center" id="deleteModalLabel">Delete Request</h2>
</div>
<div class="modal-body">
<h3>Are you sure to delete this tag?</h3>
<h1 class="py-4"><em><strong>{{ tag.tag_name }}</strong></em></h1>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary btn-sm" data-dismiss="modal">No, don't do this</button>
<form action="{% url 'delete_tag' slug_tag=tag.slug_tag %}" method="POST">
{% csrf_token %}
<button class="btn btn-danger btn-sm" type="submit" name="button">Yes, delete it</button>
</form>
</div>
</div>
</div>
</div>
</div>
</td>
</tr>
{% endfor %}
</tbody>
</table>
The problem is that it's not possible to delete every single objects of the list but only the first object. Even if I try to delete the last object I delete the first object instead of the last.
Where I've wrong?

Answer 1

All your modal forms are named the same, hence it will pick one. If it searches for a specific id, it will pick one. In order to solve this, you should give your modals different ids:
<tbody>
{% for tag in tag_list %}
<tr>
<td colspan="1">{{ tag.tag_name }}</td>
<td colspan="1">{{ tag.tag_blogpost.count }}</td>
<td colspan="1">
<div class="row justify-content-md-center">
<a class="btn btn-success btn-sm mx-1" href="{% url 'update_tag' slug_tag=tag.slug_tag %}">Update</a>
<button data-target="#deleteModal{{ tag.pk }}" class="btn btn-danger btn-sm mx-1" type="button" data-toggle="modal">Delete</button>
<div class="modal fade" id="deleteModal{{ tag.pk }}" tabindex="-1" role="dialog" aria-labelledby="deleteModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h2 class="modal-title text-center" id="deleteModalLabel">Delete Request</h2>
</div>
<div class="modal-body">
<h3>Are you sure to delete this tag?</h3>
<h1 class="py-4"><em><strong>{{ tag.tag_name }}</strong></em></h1>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary btn-sm" data-dismiss="modal">No, don't do this</button>
<form action="{% url 'delete_tag' slug_tag=tag.slug_tag %}" method="POST">
{% csrf_token %}
<button class="btn btn-danger btn-sm" type="submit" name="button">Yes, delete it</button>
</form>
</div>
</div>
</div>
</div>
</div>
</td>
</tr>
So here we added a suffix to the id of the <div class="modal fade" id="deleteModal{{ tag.pk }}" ...>, and used the same id in the <button target="#deleteModal{{ tag.pk }}" ...>.