时间戳

首页 > 解决方案 > 如何使用 AJAX 响应使用 Django 更改动态呈现的表内的跨度值

html - 如何使用 AJAX 响应使用 Django 更改动态呈现的表内的跨度值

问题描述

所以我有一个 Django 网站。我有一个产品页面，当我使用“添加到购物车”按钮将特定商品添加到购物车时，该商品会根据商品主键添加为订单商品。现在我有一个购物车页面，我可以在其中查看已经是订单项目的特定产品，这是使用这段代码动态呈现的：

我的 cart.html 页面

               <tbody>                        
                    {% for order in orders %}
                  <tr>
                    <th scope="row">
                        <div class="order-quantity">
                            <span id="order_quantity">{{order.quantity}}</span>
                                <button data-url="{% url 'add' order.id %}" class="edit-quantity" id="plus">+</button>
                                <button data-url="{% url 'subtract' order.id %}" class="edit-quantity" id="subtract">-</button>
                        </div>
                    </th>
                    <td><img src="{{order.item.product_image.url}}" alt="" width="70" height="70"></td>
                    <td>{{order.item.product_name}}</td>
                    <td> <span>&#8369;</span>  {{order.total_item_price}}</td>
                  </tr>
                    {% endfor %}
                </tbody>

现在请注意，我有一个带有数据 url 的添加数量按钮，因为我想使用 AJAX 响应自动更改跨度数量。现在我想出了如何在单击订单项目时控制台记录特定数量，例如，如果我单击订单项目 Nike，在我的控制台上我会看到订单数量，但我不知道如何更改跨度文本因为它是动态渲染的。请帮忙！ 我的购物车页面有两个按钮和数量范围。

使用此 Jquery 代码：

<script>
    $(document).ready(function() {

        $("tbody").on('click', '#plus', function() {
            var quantity =$("tbody").find("#order_quantity").text("hellooooo")

            

            $.ajax({
                url : $(this).data("url"),

                success : function(response) {
                    data = $.parseJSON(response.order)
                    console.log(data.quantity)
            
                    
                } 
            })
        })

    })
</script>

标签： htmljquerydjangoajax

解决方案

您不能对多个元素使用相同的 id，因此请将它们更改为 class selector 。然后，您可以使用.find()和closest()获取所需的跨度引用并使用 更新其值.text()。

演示代码：

$("tbody").on('click', '.edit-quantity', function() {
  var quantity = $(this).closest("tr").find("span.order_quantity")
  //uncomment ajax..on your side
  /*$.ajax({
    url: $(this).data("url"),
    success: function(response) {
      data = $.parseJSON(response.order)*/
  quantity.text(29) //data.quantity
  /*}
  })*/
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<table>
  <tbody>

    <tr>
      <th scope="row">
        <div class="order-quantity">
          <!--use class-->
          <span class="order_quantity">8</span>
          <button data-url="{% url 'add' order.id %}" class="edit-quantity plus">+</button>
          <button data-url="{% url 'subtract' order.id %}" class="edit-quantity subtract">-</button>
        </div>
      </th>
      <td><img src="{{order.item.product_image.url}}" alt="" width="70" height="70"></td>
      <td>Somethings..</td>
      <td> <span>&#8369;</span> 1990</td>
    </tr>
    <tr>
      <th scope="row">
        <div class="order-quantity">
          <span class="order_quantity">9</span>
          <button data-url="{% url 'add' order.id %}" class="edit-quantity" id="plus">+</button>
          <button data-url="{% url 'subtract' order.id %}" class="edit-quantity" id="subtract">-</button>
        </div>
      </th>
      <td><img src="{{order.item.product_image.url}}" alt="" width="70" height="70"></td>
      <td>Somethings..</td>
      <td> <span>&#8369;</span> 1990</td>
    </tr>

  </tbody>
</table>

推荐阅读