I have a template to show posts and each post has post.id.
Also there is a button to open modal and "yes" button must delete post with post.id that I clicked.
But when I do this it deleting the first post on current page instead of the right one I clicked before.
...
<div class="col-md-9">
{% for post in page %}
<div class="card-body">
<p class="card-text p-2">
<a class="link text-dark" href="/profile/{{post.author.username}}/"><strong class="d-block text-dark">@{{profile_user.username}}</strong>
</a>
{{post.text}}
{% load thumbnail %}
{% thumbnail post.image "960x339" crop="center" upscale=True as im %}
<img class="card-img" src="{{ im.url }}">
{% endthumbnail %}
</p>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<a class="btn btn-sm text-muted" href="/profile/{{profile_user.username}}/{{post.id}}/" role="button">
... </a>
{% if user.username == profile_user.username %}
<a class="btn btn-sm text-muted" href="/profile/{{profile_user.username}}/{{post.id}}/edit" role="button">...</a>
<!-- Button trigger modal -->
<button type="button" class="btn btn-sm text-muted" data-bs-toggle="modal" data-bs-target="#exampleModal">
...
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="exampleModalLabel">Delete post?</h1>
<button type="button" class="btn btn-sm text-muted" data-bs-dismiss="modal" aria-label="Close">...</button>
</div>
<div class="modal-footer">
<button type="button" class="btn btn secondary" data-bs-dismiss="modal">NO</button>
<a role="button" class="btn btn-primary" href="/profile/{{profile_user.username}}/{{post.id}}/delete">YES</a> <!-- TODO Fix id problem-->
</div>
</div>
</div>
</div>
{% endif %}
</div>
<small class="text-muted">{{post.pub_date}}</small>
</div>
</div>
{% endfor %}
...
I think the view work fine because I already tried to do this without modal and it worked fine. Is this even possible to get the right id using link in modal?
>Solution :
try attach each modal instance with specific id based on post like this:
here is an example, you should replace job.pk by post.id
<div class="modal fade" id="confirmationDialog{{ job.pk }}"
aria-hidden="true" role="dialog"
aria-labelledby="confirmationDialogLabel{{ job.pk }}">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="confirmationDialogLabel{{ job.pk }}">
Confirmation</h5>
<button type="button" class="close" data-dismiss="modal"
aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form method="POST" action="{% url 'delete-job' job.pk %}">
{% csrf_token %}
<p>Are you sure you want to delete this
job: {{ job }}</p>
<div class="modal-footer">
<div class="button-groups">
<ul>
<li>
<button type="button" data-bs-dismiss="modal">
Cancel
</button>
<input type="submit" class="btn btn-danger" value="Delete">
</li>
</ul>
</div>
</div>
</form>
</div>
</div>
</div>
</div>