Django - changing object value and displaying it without reloading

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 %}
    <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 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 %}

enes islam · Accepted Answer · 2022-08-25 12:56:55Z

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 %}
    <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)
            },
    })
})

answered Aug 25, 2022 at 12:56

enes islam

1,1046 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

KermitHQ Over a year ago

I used your answer, but I got the same result. I still have to reload page to see changes

enes islam Over a year ago

can you share your element used to see results? Do you see the new count on the console tab?

KermitHQ Over a year ago

I see new count in console. I will add results view in a second

KermitHQ Over a year ago

ok i'm dumb, after break I see the issue, i have not changed the "count-of-item' to my class

Collectives™ on Stack Overflow

Django - changing object value and displaying it without reloading

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related