How to use a Bootstrap Modal to delete a object using Class Based Views in Django?

Question

I´m using CBV in Django to delete items. What I want to do is when I click the button to remove, instead of redirecting me to the post_confirm_delete view I want to pop up a modal in which I show the question if the user want to delete the object and a button for confirm and the other to delete the object. I have tried this in the HTML:

<button class="btn" data-toggle="modal" data-target="#fm-modal-grid">Delete</button>
<div class="modal fade" id="fm-modal-grid" tabindex="-1"
     role="dialog" aria-labelledBy="fm-modal-grid"
    aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button class="close" data-dismiss="modal" aria-label="Cerrar">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-12 col-sm-6">
                            <p>Are you sure you want to delte {{post.title}}</p>
                        </div>
                    </div>
                </div>
            </div>

            <div class="modal-footer">
                <a href="{% url 'blog:post_remove' pk=post.pk %}" class="btn">Delete</a>
                <button class="btn btn-primary" data-dismiss="modal">Cancelar</button>

            </div>
        </div>
    </div>
</div>

And I have this in the delte CBV in the views class:

class PostDeleteView(DeleteView, LoginRequiredMixin):
    model = Post
    success_url = reverse_lazy('post_list')
    template_name = 'blog/post_list.html'

And the url file looks like this:

urlpatterns = [
    path('',views.PostListView.as_view(),name='post_list'),
    path('article/', views.ArticleView.as_view(), name="article"),
    path('newpost/', views.CreatPostView.as_view(), name="new_post"),
    path('post/<int:pk>', views.PostDetailView.as_view(), name='post_detail'),
    path('post/<int:pk>/edit/', views.PostUpdateView.as_view(), name='post_edit'),
    path('post/<int:pk>/remove/', views.PostDeleteView.as_view(), name='post_remove'),
]

When I press the Delete button inside the modal, it redirect me to my index, but doesn't delete the object. How can I do this?

Welford

try to put post_detail to the bottom of the urlpatterns list. – Didactics

@BearBrown it didn't work :( it still send me to the post_list without removing the object – Welford

i edited your answer with details for other who will search the same issue, please don't forget to accept your answer. – Didactics

Answer 1

By the docs

The given object will only be deleted if the request method is POST.

So the link was the reason that it did not work. I solved it by putting the modal button for delete inside a form like this:

<form action="{% url 'blog:post_remove' pk=post.pk %}" method="POST">
       {% csrf_token %}
       <button class="btn">Delete</button>
</form>

Welford

Answer 2

Deleting an Object with Django DeleteView and Bootstrap Modal

I'm adding my solution for Bootstrap 5

<!-- Button that opens a modal -->
<button type="button" class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#delete_item">
    Delete
</button>

<!-- Modal -->
<div class="modal fade" id="delete_item" data-bs-backdrop="static"
     data-bs-keyboard="false" tabindex="-1" aria-labelledby="delete_item_label" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="delete_item_label">Delete {{ object }}?</h5>
      </div>

      <form action="{% url 'object_delete_url' object.id %}" method="post">
          {% csrf_token %}

          <div class="modal-body">
            <p>Are you sure you want to delete "{{ object }}"?</p>
            {{ form }}
          </div>
          <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
              <button type="submit" class="btn btn-danger" value="Confirm">Delete</button>
          </div>
      </form>

    </div>
  </div>
</div>

Dampproof

Answer 3

Indeed you need to put your button inside a form to make a POST.

The other solution is to trigger the modal using some JS, and then when you confirm the deletion you can make an Ajax call of type POST. So you are not obligated to put the button inside a form.

$.confirm({
        title: 'Deletion pop-up',
        content: 'Do you want to proceed ?',
        buttons: {
            confirm: function () {
              $.ajax({...}),
                success: function(response){...},
            }
        }
)};

Najera

This is using jQuery? – Welford

Okey, I'm going to have this method in mind, thanks a lot :) – Welford