how do I increase number of order detail without refreshing-CodePudding

I am beginner in Django, I create checkout page and when user on change input range number enter image description here it s send to server but it work for first one I think because I set same id for all input and I can t change it because it s in for tag

how can I fix it?

Django part

class Ajax_Handler(View):
    def get(self,request):
        if request.is_ajax():            
          count=request.GET['count']
          return JsonResponse({'count':count},status=200)

ajax part

$(document).ready(function(){
            var crf=$('input[name=csrfmiddlewaretoken]').val();
            $("#icount").change(function(){
               $.ajax({
                   url:'/adding',
                   type:'get',
                   data:{
                       count:$('#icount').val(),
                       
                   },
                   success:function(respond){
                        $('#icount').val(respond.count)
                   }
               });

            });
       });

html part

<tbody>
{% for order in order.orderdetail_set.all %}        
 <tr>
<td >
 {% thumbnail order.product.image "100x100" crop="center" as im %}
<img src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}">
{% endthumbnail %}
</td>
<td ><a href="products/{{order.product.id}}">{{order.product.title}}</a></td>
<td >{{order.product.price|intcomma:False}}تومان</td>
                                            
<td >                                          
<label>تعداد</label>
<input type="hidden" name="order_id{{order.id}}" value="{{order.id}}">
 <input name='count' id='icount' min="1" max="100" value="{{order.count}}" type="number">
                                                 
</td>
<td >{{order.totalprice|intcomma:False}}</td>
<td ><a href="delete/{{order.id}}"><i ></i></a></td>
</tr>
                                        
{% endfor %}
                                        
                                       
</tbody>

CodePudding user response：

You can do somthing like this

<input name='count' id='icount' min="1" max="100" value="{{order.count}}" type="number" onchange="handleOrderCount({{order.id}})">

function handleOrderCount(OrderId){
    $.ajax({
        url:'/adding',
        type:'PUT',
        data:{
            'OrderId': OrderId,
            'csrfmiddlewaretoken': '{{ csrf_token }}',
            'count': $('#icount').val(),
        },
        success:function(respond){
            $('#icount').val(respond.count)
        }
        error:function(respond){
            console.log(respond)
        }
    });
}

If you want to change any thing in database don't use GET method it's used for retriving data from database or server use PUT to updating any objects

POST - create
GET - read
PUT - update
DELETE - delete
and in your views you can get like this

class Ajax_Handler(View):
    def get(self,request):
        if request.is_ajax() and request.method == "POST":            
          count = request.POST['count']
          # can filter object and update it like this 
          # order_id = request.POST['OrderId']
          # Order.object.filter(id=order_id)
          return JsonResponse({'count':count},status=200)