Converting Django DeleteView to work with ajax - django

Question

Im new to django and im stuck with an issue with ajax. I have the code below.
I have a django delte view. I want to use this with ajax. Right now the view is working but the CSRF Token doesnt render.
I want to try and use a class based view as im new to learn. Im not sure why the CSRF TOKEN is not being rendered in the AJAX version. It appears when a browser is used but not when ajax is used.
Can someone please help ?
view.py
class DeleteOrderItemView(SuccessMessageMixin, generic.DeleteView):
model = OrderItem
template_name = 'pos/order_item_confirm_delte.html'
# overwritten the delete to have a conformation code. Pending items do not need a conformation code.
def delete(self, *args, **kwargs):
print("I was called !")
self.object = self.get_object()
conformation_code = self.request.POST.get('cancellation_code')
if conformation_code == str(12345) or self.object.status == "Pending":
# Record code and logged in user
messages.success(self.request, "Order item {} deleted.".format(self.object.item.name))
# print cancelled KOT
return super(DeleteOrderItemView, self).delete(*args, **kwargs)
else:
messages.warning(self.request, "Incorrect conformation code.")
return HttpResponseRedirect(reverse('pos:delete_order_item', kwargs={'pk': self.object.pk}))
def get_success_url(self, **kwargs):
self.object = self.get_object()
order_pk = self.object.order.pk
return reverse_lazy('pos:order_details', kwargs={'pk': order_pk})
def render_to_response(self, context, **response_kwargs):
""" Allow AJAX requests to be handled more gracefully """
if self.request.is_ajax():
context = self.get_context_data(**response_kwargs)
rendered = render_to_string(self.template_name, context)
return JsonResponse({'delete_form': rendered}, safe=False, **response_kwargs)
else:
return super(generic.DeleteView, self).render_to_response(context, **response_kwargs)
Javascript
/* Load the delete form */
$("#js_order_list_items").on("click", "#js_remove_item", function(){
$("#modal-actions").modal("show");
remove_url = $('#js_remove_item').attr('js_delete_url')
$.ajax({
url: remove_url,
type: 'get',
dataType: 'json',
beforeSend: function () {
$("#modal-actions").modal("show");
},
success: function (data) {
console.log(data.delete_form)
$("#modal-actions .modal-content").html(data.delete_form)
}
})
});
HTML
{% load static %}
{% block content %}
<div class="container">
<br/>
<div class="col-12 alert alert-danger">
<h4>Delete item for {{ orderitem.order.customer.name }}</h4>
</div>
<div class="row">
<div class="col-6">
<ul class="list-group">
<li class="list-group-item"><strong>{{ orderitem.item.name }}</strong></li>
<li class="list-group-item">Quantity: {{ orderitem.quantity }}</li>
<li class="list-group-item">Price: {{ orderitem.price }}</li>
<li class="list-group-item">Ordered by: {{ orderitem.order.user.username }}</li>
<li class="list-group-item">
{% if messages %}
<div class="alert alert-danger" role="alert">
{% for message in messages %}
{{ message }}
{% endfor %}
</div>
{% endif %}
</li>
</ul>
</div>
</div>
<div class="row">
<div class="col-12">
<hr/>
<form method="POST" action="{% url 'pos:delete_order_item' pk=orderitem.pk %}" class="js_confirm_delete_form">
{% csrf_token %}
{% if orderitem.status == 'Confirmed' %}
<label>Cancellation Code: </label> <input type="password" id="cancellation_code" name="cancellation_code"><br/><hr/>
{% endif %}
<input type="submit" value="Confirm" class="btn btn-danger btn-large btn-lg">
<button class="btn btn-secondary btn-large btn-lg" type="button">Cancel</button>
</form>
</div>
</div>
</div>
{% endblock %}

Answer 1

I found the issue my self. The render_to_string needs the request passed to it for the csrf_token to work.
rendered = render_to_string(self.template_name, context, request=self.request)