title: Ajax request not working properly in django
body: <p>JS code for ajax request</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      $(document).ready(function(){
          console.log("IN")
          var cartUpdateForm = $('.js_cart_update_form')
          cartUpdateForm.submit(function(event){
              event.preventDefault()
              var thisform    = $(this);
              var method      = thisform.attr("method");
              var api         =  thisform.attr("api");
              var data_       = thisform.serialize();
              var current     = window.location.href
              console.log(method,api,current,data_)
              $.ajax({
                  url:api,
                  data:data_,
                  type:method,
                  success:function(data){
                      console.log("success")
                      console.log(data)
                      update_table(data)
                  },
                  error:function(data){
                      console.log('error')
                  }
  
              });
                   function update_table(data){
                      table_ = $('.js_cart_table')
                      table_body_ = table_.find(".js_cart_body")
                      table_body_.html("")
                      remove_form = $(".js_remove_form")
                      if(data.items.length &gt; 0){
                          $.each(data.items , function(index , val){
                              var rmf = remove_form.clone()
                              rmf.css('display','block')
                              rmf.find(".cart_item_id").val(val.id)
                              table_body_.prepend("&lt;tr&gt;&lt;td&gt;"+val.name+"&lt;/td&gt; 
  &lt;td&gt;"+val.price+"&lt;/td&gt;&lt;td&gt;"+rmf.html()+"&lt;/td&gt;&lt;/tr&gt;")
                          });
                      }
                      else
                      {
                          console.log("reloading..")
                          window.location.href = current
                      }
                  }
              });
          });
      &lt;/script&gt;
  </code></pre>
  
  <p>updateapi in views.py:</p>
  
  <pre><code>def update_util(request):
      pk = int(request.POST.get('item_id'))
      rest_id  = request.session['rest_id']
      restaurant = Restaurant.objects.get(pk = rest_id)
      cart_obj = Cart.objects.new_or_create(request)
      remove = request.POST.get('remove')
      item = FoodItem.objects.get(pk=pk)
      # print(pk)
      if remove == '1': 
          cart_obj.items.remove(item)
      else:
          cart_obj.items.add(item)
  
  def update(request):
      update_util(request)
      rest_id  = request.session['rest_id']
      return redirect(reverse('restaurant:menu', kwargs={'pk':rest_id}))
  
  def updateapi(request):
      if request.is_ajax():
          update_util(request)
          cart_obj = Cart.objects.new_or_create(request)
          print(request.POST.get('remove') ,'called')
          items = []
          data = {}
          for item in cart_obj.items.all():
              items.append({'name':item.name , 'price':item.price 
  ,'id':item.id})
          data_ = {'items':items , 'total':cart_obj.total , 
  'subtotal':cart_obj.subtotal}
      return JsonResponse(data_)
  </code></pre>
  
  <p>HTML Form on which call is occuring for remove:</p>
  
  <pre><code>&lt;table class="table js_cart_table"&gt;
  &lt;thead&gt;
      &lt;th&gt;Item&lt;/th&gt;&lt;th&gt;Price&lt;/th&gt;&lt;th&gt;&lt;/th&gt;
  &lt;/thead&gt;
  &lt;tbody class="js_cart_body"&gt;
      {% for item in cart.items.all %}
              &lt;tr&gt;&lt;td&gt;{{ item }}&lt;/td&gt; &lt;td&gt;   {{ item.price  }}&lt;/td&gt;
                  &lt;td&gt;{% include 'cart/include/remove_cart.html' with 
   item_id=item.id %}&lt;/td&gt;
              &lt;/tr&gt;
      {% endfor %}
  &lt;/tbody&gt;
  
      &lt;/table&gt;
      &lt;div class="js_remove_form" style="display: none;"&gt;
      {% include 'cart/include/remove_cart.html' %}&lt;/div&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>remove_cart.html:</p>
  
  <pre><code>&lt;form class='js_cart_update_form' api="{% url 'cart:update_api' %}" action=" 
  {% url 'cart:update' %}"  method='POST'&gt;
      {% csrf_token %}
      &lt;input class='cart_item_id' type="hidden" name="item_id" value= "{{ 
  item_id }}"&gt;
      &lt;input type="hidden" name="remove" value="1"&gt;
      &lt;input class=" btn btn-xs btn-danger js_update" type='submit' value="X"&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>Same is for add just hidden value of remove is 0 and value of input type submit is Add.</p>
  
  <p>Items in cart are added normally but when removing them first time the page reloads and the second time the ajax call happens , this happens alternatively.</p>
  
  <p>Don't know why I am having this weird behaviour.</p>