How to use bootbox for Django DeleteView?

Question

I am using Django DeleteView for deleting objects. First, I implemented delete add confirm dialog redirecting another html page. Now, I want to add bootbox pop up. But i don't understand where to add code. Please help

models.py

class Review(models.Model):
  review_description = models.TextField(max_length=500)
  user = models.ForeignKey(settings.AUTH_USER_MODEL, default=1)
  book = models.ForeignKey(Book, on_delete=models.CASCADE)
  updated = models.DateTimeField(auto_now=True, auto_now_add=False)
  timestamp = models.DateTimeField(auto_now=False, auto_now_add=True)

views.py

class ReviewDelete(DeleteView):
  model = Review
  template_name = "confirm_delete.html"

  def get_success_url(self, *args, **kwargs):
    review = get_object_or_404(Review, pk=self.kwargs['pk'])
    return reverse("books:detail", args = (review.book.id,))

confirm_delete.html

{% extends "base.html" %}
{% block content %}
<h1>Delete</h1>
<p>Are you sure you want to delete {{ review }}?</p>
<form action="{% url "delete" pk=review.id %}" method="POST">
  {% csrf_token %}
  <input type="submit" value="Yes, delete." />
  <a href="{% url "books:detail"  id=review.book.id %}">No, cancel.</a>
</form>
{% endblock %}

book_details.html

<a href="{% url "delete" pk=review.id %}" class="badge badge-danger">Delete</a>
{# <a href="{% url "delete" pk=review.id %}" class="badge badge-danger">Delete</a>#}

base.html

<script type="text/javascript">
    $(document).ready(function () {
        $("#review-delete-btn").click(function (event) {
            event.preventDefault();
            bootbox.confirm({
                title: "Destroy planet?",
                message: "Do you want to delete? This cannot be undone.",
                buttons: {
                    cancel: {
                        label: '<i class="fa fa-times"></i> Cancel'
                    },
                    confirm: {
                        label: '<i class="fa fa-check"></i> Confirm'
                    }
                },
                callback: function (result) {
                    console.log('This was logged in the callback: ' + result);
                }
            });
        });
    });
</script>

urls.py

url(r'^reviews/(?P<pk>\d+)/delete/$', ReviewDelete.as_view(), name='delete'),

I want to delete by bootbox. I don't understand what should i write in bootbox confirm block. I want to delete by clicking bootbox confirm, not redirecting another page. — Sadman Sobhan, Dec 14 '17 at 07:47

score 1 · Accepted Answer · answered Dec 14 '17 at 21:21

Assuming your server page doesn't perform redirects when completing the delete, you just need to add an AJAX call to the confirm callback. Something like this:

<script>
    $(function () {
        $("#review-delete-btn").on('click', function (event) {
            event.preventDefault();

            // for referencing this later in this function
            var _button = $(this);

            bootbox.confirm({
                title: "Destroy planet?",
                message: "Do you want to delete? This cannot be undone.",
                buttons: {
                    cancel: {
                        label: '<i class="fa fa-times"></i> Cancel'
                    },
                    confirm: {
                        label: '<i class="fa fa-check"></i> Confirm'
                    }
                },
                callback: function (result) {
                    // result will be a Boolean value
                    if(result){
                        // this encodes the form data
                        var data = _button.closest('form').serialize();

                        $.post('your delete URL here', data).
                            done(function(response, status, jqxhr){
                                // status code 200 response
                            })
                            .fail(function(jqxhr, status, errorThrown){
                                // any other status code, including 30x (redirects)
                            });
                    }
                }
            });
        });
    });
</script>

You will probably want to review the documentation for $.post and serialize. I would also recommend working your way through the AJAX topics - $.post is a convenience method for $.ajax, so you should know how to use both.

How to use bootbox for Django DeleteView?

1 Answers1