Ajax成功函数仅更新第一次单击的值

Question

Okay I have a html table given below:

<table class="table">
    <thead>
        <tr>
            <th>Product</th>
            <th>Quantity</th>
            <th colspan="2">Total</th>
        </tr>
    </thead>
    <tbody id="cart_table">
        ... 
    </tbody>
    <tfoot>
        <tr>
            <th colspan="2">Total</th>
            <th colspan="2">$446.00</th>
        </tr>
    </tfoot>
</table>

I am using ajax to append values clear tbody at every click of a button and refill the tbody with multidimensional session array. It works fine for 1st turn, but does not work for 2nd click

My jquery code is given below

 <script>
    $(document).ready(function(){
        $('.addToCart').on('click',function(e){
            $("#cart_table").empty();
            var price = $(this).attr('data-price');
            var item = $(this).attr('data-itemname');

                e.preventDefault();
                $.ajax({
                method : "POST",
                async: false,
                url: "./php/addToCart.php",
                dataType : "json",
                data : {item:item,price:price},
                success : function(response){
                  $("#cart_table").empty();
                  <?php 
                  $i = 0; 
                foreach ($_SESSION["cart_array"] as $each_item):
                $item = $each_item['item'];
                $price=$each_item['price'];
                $quantity=$each_item['quantity'];
                  ?>
                  $('#cart_table').append("<tr><td><?php echo $item; ?></td><td><?php echo $quantity; ?></td><td><?php echo $price; ?></td><td><a href='#'><i class='fa fa-trash-o'></i></a></td></tr>");
                <?php
                endforeach;
                ?>
                }

                });     

        });
    });
</script>

I have checked my session values are updated. However, the change is not shown on my table except for first click.

Answer 1

As pointed out in comments PHP is server side language, for it to reflect the changes, your page needs to reload but because you are using ajax page is not going to reload (Or rather we don't need it to reload).

It work for the first time because for the first time when page is loaded, the current data will already be present in your JavaScript function :

Right here :

$('#cart_table').append(<?php echo "<tr><td>".$item."</td><td>".$quantity."</td><td>".$price."</td><td><a href='#'><i class='fa fa-trash-o'></i></a></td></tr>";?>);

So what happens here is that when you click for the first time, your ajax will execute and success function is called, this function will add the already presented data because it will not update unless your page is reload. So every time you click, your session will be updated and success function is also called but your table will not reflect the changes.

So, You need to change your PHP code To JavaScript, Here the basic idea of what to do, (Here i have assumed your response is JSON, And also note that following code will not work out of the box because i didn't tested it.)

<script>
$(document).ready(function(){
    $('.addToCart').on('click',function(e){
        $("#cart_table").empty();
        var price = $(this).attr('data-price');
        var item = $(this).attr('data-itemname');

            e.preventDefault();
            $.ajax({
            method : "POST",
            async: false,
            url: "./php/addToCart.php",
            dataType : "json",
            data : {item:item,price:price},
            success : function(response){
              $("#cart_table").empty();

              //New JavaScript code, make appropriate changes.
              jQuery.each(response, function(key, row) {
                  $('#cart_table').append("<tr><td>" + row.item + "</td><td>" + row.quantity + "</td><td>" + row.price + "</td><td><a href='#'><i class='fa fa-trash-o'></i></a></td></tr>");
              });
            }

            });     

    });
});