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

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 %}
    <a href="#" data-orderItemId="{{product.id}}" class = "quantity-increase"><div >Some button content</div></a>
{% 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 >
        <div style="flex:2"><img  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"  src="{% static  'images/arrow-up.png' %}">
                        
                <img data-product={{item.product.id}} data-action="remove"  src="{% static  'images/arrow-down.png' %}">
            </div>
        </div>
        <div style="flex:1">${{ item.get_total }}</div>
    </div>
{% endfor %}

CodePudding user response：

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 %}
    <a href="#" data-orderItemId="{{product.id}}" class = "quantity-increase"><div >Some button content</div></a>
{% 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)
            },
    })
})