Bootstrap modal to confirm deletion - django

Question

When I loop over my images I have an icon that you can click to delete the image. Instead I'd like to have a modal pop up to confirm the deletion. The only problem is I don't want to repeate the code for the modal for each image. I need a way to pass the image id to the modal.
I was thinking I could pass the id in through an onClick but I'm not sure that will work with the Bootstrap modal.
Here's how I'm currently deleting:
{% for image in images %}
<img src="{{image.image.url}}">
<form method="POST" action="{% url 'products:delete_image>
{% csrf_token %}
<button type="submit" rel="tooltip" title="Remove">
<i class="material-icons">close</i>
</button>
</form>
{% endfor %}
Here's the modal code I'd like to integrate
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" 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="exampleModalLongTitle">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</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>

Answer 1

Assign a click handler to the button inside each form and give each form a unique id. For example, give all the form buttons a class like confirm-delete. Assign a click handler (this is jQuery but you could also use vanilla JS)...
$('.confirm-delete').on('click', function(e) {
// prevent form submit
e.preventDefault();
// get the current image/form id
var id = $(this).attr("id")
// assign the current id to the modal and show the modal
$('#myModal').data('id', id).modal('show');
})
Then inside the modal, have a button that actually performs the delete using the id that is passed through data...
$('#btnDelete').click(function() {
// handle deletion here
var id = $('#myModal').data('id');
// submit the form
$('form'+id).submit();
// if needed, remove deleted image
// and form from DOM
$('#img'+id).remove();
$('#form'+id).remove();
// hide modal
$('#myModal').modal('hide');
})
Demo