'Bootstrap delete confirmation dialog

I am trying to Delete a record using bootstrap model in Djando while getting a confirmation. The Model view gets triggered and deletes the record but on success it points to the url pointing to the deleted record and it gives a 404 error. It seems it tries to post the request twice. I could not find resources on this to help me get around and also I am in learning phase so I am looking forward to expert advice on this. Thanks

Delete button in the index.html against the record to delete.

<button type="button" class="delete-task btn btn-sm btn-primary" data-id="{% url 'delete' 
task.pk %}"><span class="fa fa-trash"></span></button>

Javascript in index.html

 $(".delete-task").each(function () {
  $(this).modalForm({formURL:$(this).data('id')});
  });

Model.html:

<div class="modal fade" tabindex="-1" role="dialog" id="modal">
   <div class="modal-dialog" role="document">
    <div class="modal-content"></div>
    </div>
 </div>

delete_task.html:

   {% load widget_tweaks %}

   <form method="POST" action="">
   {% csrf_token %}

   <div class="modal-header">
   <h3 class="modal-title">Delete Task</h3>
   <button type="button" class="close" data-dismiss="modal" aria-label="Close">
   <span aria-hidden="true">&times;</span>
   </button>
   </div>

   <div class="modal-body">
   <p class="delete-text">Are you sure you want to delete Task with title
   <strong>{{ task.title }}</strong>?</p>
   </div>

   <div class="modal-footer">
   <button id="delete-task" type="submit" class="delete-task btn btn-danger" >Delete</button>
   </div>

   </form>

View.py:

 class TaskDeleteView(BSModalDeleteView):
model = Task
template_name = 'delete_task.html'
success_message = 'Deleted Successfully'

def get_success_url(self):
    return reverse_lazy('index')

Urls.py:

path('delete/<str:pk>', views.TaskDeleteView.as_view(), name='delete'),

Console Output:

[07/Mar/2022 19:53:51] "GET /delete/33 HTTP/1.1" 200 670
[07/Mar/2022 19:53:57] "POST /delete/33 HTTP/1.1" 302 0
[07/Mar/2022 19:53:57] "GET / HTTP/1.1" 200 2330
Not Found: /delete/33
[07/Mar/2022 19:53:57] "POST /delete/33 HTTP/1.1" 404 2962


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source