如何在jquery中显示flask中for循环中已更改变量的值?

2024-09-20 06:43:43 发布

您现在位置:Python中文网/ 问答频道 /正文

我正在使用python flask为一个在线商店构建一个web应用程序,在jinja2中使用for循环更改cart中的数量时遇到了一个问题,它正确地更改了数据库中的数量,但在页面上更改了第一个产品的值,而没有对所选产品进行任何更改

这是我的密码: cart.html文件

     {% for row in resCart1 %}

      <td class="product-quantity">
     <div class="quantity-range" >
        <div id="qtyView_{{ row[0] }}">
            <span class="qtyView">{{ row[4] }} 
            </span> <!-- Here is the updated value -->
        </div>                           
        <span style="font-size: 12px; margin-left: 55px;">
            <a 
             data-toggle="collapse" 
             href="#collapseChange{{ row[0] }}" 
             role="button" 
             aria-expanded="false" 
             aria-controls="collapseChange{{ row[0] }}"> Change
            </a>
        </span>
        <div class="collapse" id="collapseChange{{ row[0] }}">
            <div>
               <input id="cartQty_{{ row[0] }}" 
                   data-id="{{ row[0] }}" 
                   data-qty="{{ row[4] }}" 
                   data-size="{{ row[6] }}" 
                   data-color="{{ row[5] }}" 
                   data-price="{{ row[3] }}" 
                   data-totalprice="{{ row[7] }}" class="cartQty" type="number" step="1" min="0" value="1" title="Qty" size="4">
            </div>
         </div>
      </div>
  </td>
   {% endfor %}

在my qty.js文件中:

// create a class called .cartQty in input element for every product
$('.cartQty').each(function(){
        var cart_qty = $(this).attr('id');

        $(this).change(function() {
           var value = $('#'+cart_qty).val();
           var qty = $('#'+cart_qty).data('qty');
           var id = $('#'+cart_qty).data('id');
           var color = $('#'+cart_qty).data('color');
           var size = $('#'+cart_qty).data('size');
           var price = $('#'+cart_qty).data('price');
           var totalPrice = $('#'+cart_qty).data('totalprice');

            alert(value + ' ' + qty + ' ' + id + ' ' + color + ' ' + size + ' ' + price + ' ' + totalPrice);
            $.ajax({
                type: 'POST',
                url: '/changeQty',
                data: {
                    value: value,
                    qty: qty,
                    id: id,
                    color: color,
                    size: size,
                    price: price,
                    totalPrice: totalPrice
                }
            }).done(function(data){
                if (data.success) {
                    toastr.success(data.success);

                    var qtyView1 = 'qtyView_' + $('input').attr('id');
                    var qtyView = $('.qtyView').attr('id');
                    // when I put alert(qtyView1) or alert(qtyView) after reveiving data from app.py it shows the first loop (qtyView_cartQty_5) which is the first loop for me. 
                    $('#'+qtyView).find('.qtyView').remove();
                    $('#'+qtyView).append('<span class="qtyView">' + data.newQty + '</span>');
// here it displays the new values in the first loop only even if I changed any product in the loop.
                }
                else if (data.error) {
                     toastr.error(data.error);
                }
             });
        });
    });

以及我的app.py文件:


@app.route('/changeQty', methods=['GET', 'POST'])
def changeQty():
    qtyChange = int(request.form['value'])
    qtyCurrent = int(request.form['qty'])
    cartId = request.form['id']
    cartColor = request.form['color']
    cartSize = request.form['size']
    cartPrice = float(request.form['price'])
    cartTotalPrice = float(request.form['totalPrice'])
    if qtyChange == 0:
        return jsonify({'error': 'there is no quantity equals zero'})
    elif qtyChange == qtyCurrent:
        return jsonify({'error': 'No change for your request'})
    elif qtyChange > qtyCurrent:
        newTotalPrice = cartPrice * qtyChange 
    elif qtyChange < qtyCurrent:
        newTotalPrice = cartPrice * qtyChange

    if (cartColor == None) and (cartSize == None):
        con = mysql.connect()
        cur = con.cursor()
        sql = "UPDATE cart SET quantity = %s, totalPrice = %s WHERE productId = %s AND userId = %s"
        cur.execute(sql, (qtyChange, newTotalPrice, cartId, session['id']))
        con.commit()

        return jsonify({'success': 'Updated your Quantity', 'newQty': qtyChange, 'newTotal': newTotalPrice})

    elif cartSize != None:
        con = mysql.connect()
        cur = con.cursor()
        sql = "UPDATE cart SET quantity = %s, totalPrice = %s WHERE size = %s AND productId = %s AND userId = %s"
        cur.execute(sql, (qtyChange, newTotalPrice, cartSize, cartId, session['id']))
        con.commit()

        return jsonify({'success': 'Updated your Quantity', 'newQty': qtyChange, 'newTotal': newTotalPrice})
    elif cartColor != None:
        con = mysql.connect()
        cur = con.cursor()
        sql = "UPDATE cart SET quantity = %s, totalPrice = %s WHERE AND color = %s AND productId = %s AND userId = %s"
        cur.execute(sql, (qtyChange, newTotalPrice, cartColor, cartId, session['id']))
        con.commit()

        return jsonify({'success': 'Updated your Quantity', 'newQty': qtyChange, 'newTotal': newTotalPrice})
    else:

        con = mysql.connect()
        cur = con.cursor()
        sql = "UPDATE cart SET quantity = %s, totalPrice = %s WHERE size = %s AND color = %s AND productId = %s AND userId = %s"
        cur.execute(sql, (qtyChange, newTotalPrice, cartSize, cartColor, cartId, session['id']))
        con.commit()

        return jsonify({'success': 'Updated your Quantity', 'newQty': qtyChange, 'newTotal': newTotalPrice})

我试着把课程改成适合每一种产品,比如 <span class="qtyView_cartQty_{{ row[0] }}"> {{ row[4] }} </span>并在jquery中对其进行了更改,但仍然显示循环中第一个乘积的结果

我花了几个小时在谷歌上寻找解决方案,但没有任何好消息,我不知道我做错了什么…你能帮我吗


Tags: andiddatasizevarconclasscolor