javascript - 第一次点击无响应 - JavaScript & Django

Question

我是 Django 新手，在电子商务网站上工作并尝试改进购物车功能。我按照课程使用 JavaScript 更新购物车中的项目，如下面的代码。如果我单击其他页面（如产品列表）上的“添加”或“删除”按钮，它工作正常。但是，当我尝试点击购物车页面上的“删除”按钮时（我可以在其中看到购物车中的所有产品），它作为第一次从购物车中删除的商品效果很好。之后，我点击了按钮，页面刚刚刷新。然后我又点击了一次，它又工作了。所以就像在删除第一个项目后，我必须单击两次才能删除我想要的项目。下面是我的 JavaScript 代码、views.py 和我的 cart_home.html。希望任何人都可以帮助解决这个问题，我已经被困了一个星期......

JavaScript

<script type="text/javascript">
      $(document).ready(function(){
        var productForm = $(".form-product-ajax") // id:#form-product-ajax
        productForm.submit(function(event){
          event.preventDefault();
          console.log("Form is not sending");
          var thisForm =$(this);
          var actionEndpoint = thisForm.attr('data-endpoint');

          var httpMethod = thisForm.attr('method');
          var formData = thisForm.serialize();

          $.ajax({
            url: actionEndpoint,
            method: httpMethod,
            data: formData,
            success: function (data) {
              console.log("success");
              console.log(data);
              console.log("Added:",data.productAdded);
              console.log("Removed:",data.productRemoved);
              var submitSpan = thisForm.find(".submit-span")
              if (data.productAdded) {
                submitSpan.html('<button  class="btn btn-danger btn-sm "  type="submit" name="remove">Remove</button>')
              } else {
                submitSpan.html('<button  class="btn btn-success btn-sm"  type="submit" name="Add">Add to Cart</button>')
              }
              var navbarCount = $(".navbar-cart-count")
              navbarCount.text(data.cartItemCount)
              var currentPath = window.location.href
              if (currentPath.indexOf("cart") != -1) {
                     refreshCart()
                 }
            },
            error: function (errorData) {
              console.log("error");
              console.log(errorData);
            }
          })
        })

        function refreshCart() {
          console.log("in current cart");
          var cartTable = $(".cart-table")
          var cartBody = cartTable.find(".cart-body")
          var productRows = cartBody.find(".cart-products")
          var currentUrl = window.location.href
          var refreshCartUrl ='api/carts'
          var refreshCartMethod="GET";
          var data={};
          $.ajax({
            url: refreshCartUrl,
            method: refreshCartMethod,
            data:data,
            success:function(data) {
              var hiddenCartItemRemoveForm = $(".cart-item-remove-form")

              if (data.products.length>0) {
                productRows.html("")
                i = data.products.length
                $.each(data.products,function (index,value) {
                  console.log(value);
                  var newCartItemRemove = hiddenCartItemRemoveForm.clone()
                  newCartItemRemove.css("display","none")
                  newCartItemRemove.find(".cart-item-product-id").val(value.id)
                  cartBody.prepend("<tr><th scope=\"row\">" + i +"</th><td><a href='" +value.url + "'>" + value.name +"</a>" + newCartItemRemove.html() + "</td><td>" + value.price + "</td></tr>")
                  i --
                })

                cartBody.find(".cart-subtotal").text(data.subtotal);
                cartBody.find(".cart-tax").text(data.tax);
                cartBody.find(".cart-total").text(data.total);
              }else {
                window.location.href = currentUrl;
              }
            },
            error:function(errorData) {
              console.log("error");
              console.log(errorData);
            }
          })
        }

      })
    </script>

Cart_home.html

{% extends "base.html" %}

{% block content %}
<h1>Cart</h1>

{% if cart.products.exists %}
<table class="table cart-table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Prodcut Name</th>
      <th scope="col">Product Price</th>
    </tr>
  </thead>
  <tbody class="cart-body">


    {% for product in cart.products.all %}
    <tr class='cart-products'>
      <th scope="row">{{forloop.counter}}
      <td><a href="{% url 'products:detail' slug=product.slug %}">{{product.name}}</a>
        {% include "carts/snippets/remove-product.html" with product_id=product.id%} </th>

      </td>
      <td>${{product.price}}</td>
    </tr>
    {% endfor %}
    <tr>
      <th colspan='2'></th>
      <td> <b>Subtotal : $</b><span class="cart-subtotal">{{cart.subtotal}}</span> </td>

    </tr>

    <tr>
      <th colspan='2'></th>
      <td> Tax : $<span class="cart-tax" >{{cart.tax}} </span></td>

    </tr>

    <tr>
      <th colspan='2'></th>
      <td> <b>Total : $</b><span class="cart-total">{{cart.total}} </span>  </td>

    </tr>

    <tr>
      <th colspan='2'></th>
      <td> <a class="btn btn-success" href="{% url 'carts:checkout' %}">Checkout</a> </td>

    </tr>





  </tbody>
</table>
<div class="cart-item-remove-form" style='display:none'>
  {% include "carts/snippets/remove-product.html" with product_id=product.id%}

</div>


{% else %}
<p class="lead">There is no porduct in your cart now! </p>
<p> <a class="btn btn-secondary" href="{% url 'products:list' %}">Go to check!</a> </p>
{% endif %}



{% endblock content %}

视图.py

def cart_detail_api_view(request):
    cart_obj, new_obj = Cart.objects.new_or_get(request)
    products = [{
            "ud":x.id,
            "url":x.get_absolute_url(),
            "name":x.name,
            "price":x.price,
            }
    for x in cart_obj.products.all()]

    cart_data ={"products":products,"subtotal":cart_obj.subtotal,"total":cart_obj.total,"tax":cart_obj.tax()}
    return JsonResponse(cart_data)

def cart_update(request):
    product_id = request.POST.get('product_id')

    if product_id:
        try:
            product_obj = Product.objects.get(id=product_id)
        except Product.DoesNotExist:
            print("Show message to user, product does not exist")
            raise("Producr does not exist")
            return redirect("carts:home")
        else:
            cart_obj, new_obj = Cart.objects.new_or_get(request)
        if product_obj in cart_obj.products.all():
            cart_obj.products.remove(product_obj)
            product_added = False
        else:
            cart_obj.products.add(product_obj) # cart_obj.products.add(1)
            product_added = True
        request.session['cart_items'] = cart_obj.products.count()
        if request.is_ajax(): #Asynchronous JavaScript Anx XML / JSON(JaveScrtip Object Notation)
            print("Ajax request")
            json_data = {
                "productAdded":product_added,
                "productRemoved":not product_added,
                "cartItemCount":cart_obj.products.count()
            }
            return JsonResponse(json_data)
    return redirect("carts:home")

标签： javascriptdjango