Django - changing object value and displaying it without reloading - django

Question

I got this model:
class OrderItem(models.Model):
order = models.ForeignKey(Order, on_delete=models.CASCADE)
item = models.ForeignKey(Product, on_delete=models.CASCADE)
quantity = models.IntegerField()
and I'd like to make user able to change its quantity value without reloading page
tried to do it this way:
views:
def increaseQuantity(request):
if request.method == 'GET':
orderItem_id = request.GET['orderItem_id']
orderitem = OrderItem.objects.get(id=orderItem_id)
orderitem.quantity += 1
orderitem.save()
url
path('cart/increase/', increaseQuantity, name='increase'),
template:
{% for product in products %}
<div >Some button content</div>
{% endfor %}
#
#
#
$('.quantity-increase').click(function(){
var orderItemId;
orderItemId = $(this).attr("data-orderItemId");
$.ajax({
type: "GET",
url: "increase",
data:{
orderItem_id:orderItemId
},
})
})
Quantity is being increased correctly, but I need to reload page to see results. What should I add/change to be allowed to see them without reloading ?
view used to see results:
def cart(request):
data = cartData(request)
cartItems = data['cartItems']
order = data['order']
items = data['items']
context = {'items':items, 'order':order, 'cartItems':cartItems}
return render(request, 'store/cart.html', context)
template
{% for item in items %}
<div class="cart-row">
<div style="flex:2"><img class="row-image" src="{{ item.product.imageURL }}"></div>
<div style="flex:2">{{ item.product.name }}</div>
<div style="flex:1">${{ item.product.price|floatformat:2 }}</div>
<div style="flex:1">
<p class = "quantity">{{item.quantity}}</p>
<div class = "quantity">
<img data-product={{item.product.id}} data-action="add" class="chg-quantity update-cart" src="{% static 'images/arrow-up.png' %}">
<img data-product={{item.product.id}} data-action="remove" class="chg-quantity update-cart" src="{% static 'images/arrow-down.png' %}">
</div>
</div>
<div style="flex:1">${{ item.get_total }}</div>
</div>
{% endfor %}

Answer 1

POST method is more suitable for this request
view
from django.http import JsonResponse
def increaseQuantity(request):
if request.method == 'POST':
if request.POST.get("operation") == "increase":
orderitem = OrderItem.objects.get(id=request.POST.get('orderItem_id', None))
orderitem.quantity += 1
orderitem.save()
return JsonResponse({'count':orderitem.quantity)
return JsonResponse({'error':'error')
html
{% for product in products %}
<div >Some button content</div>
{% endfor %}
#
#
#
$('.quantity-increase').click(function(){
var orderItemId;
orderItemId = $(this).attr("data-orderItemId");
$.ajax({
type: "POST",
url: "increase",
data:{
orderItem_id:orderItemId,
csrfmiddlewaretoken: '{{ csrf_token }}',
'operation':'increase'
},
success: function(data) {
$('.count-of-item').html(data.count) // your results element to show current quantity
console.log(data.count)
},
})
})