Question

我正在购买购物车。我正在将产品添加到购物车中。然后使用Ajax更改项目Quantity On Change。这个过程完全适用于First Change。但是当我再次改变数量时，部分没有刷新。

以下是编码以显示购物车详情

        <?php
        $session_id = $_SESSION["session_id"];
        $query = "select c.cart_id, c.item_quantity, p.category_name, p.product_thumb, p.reduced_price from cart as c inner join category as p on c.category_id = p.category_id where c.session_id = '$session_id'";

        $select_cart = mysqli_query($mysqli, $query);
        if (mysqli_num_rows($select_cart) > 0)
        {
        ?>
        <table>
            <tr>
                <th>Item</th><th>Item Detail</th><th>Quantity</th><th>Price</th><th>Sub Total</th>
            </tr>
            <?php
            while ($result_cart = mysqli_fetch_object($select_cart))
            {
            ?>
            <tr id="cart<?php echo $result_cart->cart_id; ?>">
                <td width="100" align="center"><img src="images/products/<?php echo $result_cart->product_thumb; ?>" width="50" /></td>
                <td><?php echo $result_cart->category_name; ?><br /><?php echo $result_cart->product_name; ?></td>

                <td width="50" align="center"> 

                    <select class="quantity" id="quantity<?php echo $result_cart->cart_id; ?>" >
                        <?php

                        for ($i = 1; $i <= 10; $i++)
                        {

                        ?>
                        <option value="<?php echo $i; ?>" <?php if ($result_cart->item_quantity == $i) { echo "selected"; } ?>><?php echo $i; ?></option>
                        <?php
                        } 
                        ?>

                    </select>

                </td>

                <td width="75" align="center">$<?php echo $result_cart->reduced_price; ?></td>
                <td width="100" align="center">$<?php echo $result_cart->item_quantity * $result_cart->reduced_price; ?> 
                <a title="Delete" href="delete-cart.php?id=<?php echo $result_cart->cart_id; ?>" class="delete"></a></td>

            </tr>
            <?php
            }
            ?>
        </table>
        <?php
        }
        else
        {
        ?>
        <p>Cart is Empty..!</p>
        <?php
        }
        ?>

这是在同一页面上使用的Ajax脚本

<script type="text/javascript">
$('.quantity').change( function() 
{
var ID = $(this).attr("id");
var sid=ID.split("quantity"); 
var New_ID=sid[1];

var QTY = document.getElementById(ID).value;

var URL='updatecart.php';
var dataString = 'id=' + New_ID +'&qty='+ QTY;


$.ajax({
type: "GET",
url: URL,
data: dataString,
cache: false,
 success: function(data){
     $('#cart'+New_ID).html(data);
     alert (data);

} 
});
});
</script>

以下是我将数据更新为database- updatecart.php 的代码。

<?php
include('admin/includes/config.php');

if(isset($_GET['id'])) {

$cart_id = ($_GET['id']);
$item_quantity = ($_GET['qty']);

mysqli_query($mysqli, "update cart set item_quantity = '$item_quantity' where cart_id = '$cart_id'");

// Loop through the products and output HTML for JavaScript to use
?>
<?php
$query = "select c.cart_id, c.item_quantity, p.category_name, p.product_thumb, p.reduced_price             from cart as c inner join category as p on c.category_id = p.category_id where c.cart_id = '$cart_id'";
$select_cart = mysqli_query($mysqli, $query);
$result_cart = mysqli_fetch_object($select_cart);
?>

                <td width="100" align="center"><img src="images/products/<?php echo $result_cart->product_thumb; ?>" width="50" /></td>
                <td><?php echo $result_cart->category_name; ?><br /><?php echo $result_cart->product_name; ?></td>

                <td width="50" align="center"> 

                    <select class="quantity" id="quantity<?php echo $result_cart->cart_id; ?>" >
                        <?php

                        for ($i = 1; $i <= 10; $i++)
                        {

                        ?>
                        <option value="<?php echo $i; ?>" <?php if ($result_cart->item_quantity == $i) { echo "selected"; } ?>><?php echo $i; ?></option>
                        <?php
                        } 
                        ?>

                    </select>

                </td>

                <td width="75" align="center">$<?php echo $result_cart->reduced_price; ?></td>
                <td width="100" align="center">$<?php echo $result_cart->item_quantity * $result_cart->reduced_price; ?> 
                <a title="Delete" href="delete-cart.php?id=<?php echo $result_cart->cart_id; ?>" class="delete"></a></td>

<?php
} 
?>

我需要在更改特定商品的数量时自动计算购物车的小计价格和总价格。我是Ajax的新手。

这些是类似的问题。

1. Ajax form only work one time

2. Ajax Request works only once - code Ignitor

在引用这些问题之后，我尝试使用类似$('.quantity').on( "change", "select", function() {但未获得结果的内容。

请帮帮我。我是否需要更改整个编码结构。

Answer 1

您在ajax成功后更改DOM（使用html（）方法）。该元素将替换为新元素，因此您的事件将被删除。

此外，您的其他修复仅适用于已删除的数量元素的更改。尝试像

这样的东西

$(document).on( "change", ".quantity", function() {}

Answer 2

我发现了2个问题：

1。始终在jQuery相关事件周围使用DOM的文档就绪函数：

$( document ).ready(function() {
     //DOM EVENTS
});

2。您的活动不适用于实时生成的DOM元素：

$( '.quantity' ).change( function(){} );

将其更改为：

$( document ).on('change', '.quantity', function(){} );

这也将为DOM元素添加事件监听器，其中包含第一次加载文档后生成的“数量”类。

Answer 3

这不是最好的解决方案，但至少它可以作为一种解决方法。您可以在代码中执行以下操作：

<script type="text/javascript">
$('.quantity').change(selectChange);
function selectChange() 
{
var ID = $(this).attr("id");
var sid=ID.split("quantity"); 
var New_ID=sid[1];

var QTY = document.getElementById(ID).value;

var URL='updatecart.php';
var dataString = 'id=' + New_ID +'&qty='+ QTY;


$.ajax({
type: "GET",
url: URL,
data: dataString,
cache: false,
 success: function(data){
     $('#cart'+New_ID).html(data);
     $('.quantity').change(selectChange);
     alert (data);

} 
});
}
</script>

我假设你的“选择”被删除并重新附加在ajax调用成功回调上，因此，事件不会被多次绑定。

Ajax响应只工作一次 - 使用PHP的购物车

3 个答案: