Удалить продукт Итоговая сумма не уменьшена с использованием php ajax

Question

Я создаю сайт электронной коммерции для моего проекта на последний год. Я столкнулся с проблемой удаления продукта. если я удаляю продукт, продукт был удален из базы данных успешно. но итоговый итог не уменьшил то, что я пытался до сих пор, я прикрепил ниже вместе со снимком экрана ниже.

Таблица

 <div class="container">
                <table class="table table-striped" id="mytable">
                    <thead>
                    <tr>
                        <th>ProductID</th>
                        <th>Productname</th>
                        <th>Price</th>
                        <th>Qty</th>
                        <th>Amount</th>
                        <th>Delete</th>
                    </tr>
                    </thead>
                    <tbody>

                    </tbody>
                </table>
            </div>

        </div>

        <div style='text-align: right; margin:10px'>
            <label><h3>Total amount: </h3></label>
            <span style="font-size: 40px; color: #ff0911" id='total-amount'></span>
        </div>

Показать продукты

<script> 
getProducts();
function getProducts() {
    $.ajax({
        type: 'GET',
        url: 'all_cart.php',
        dataType: 'JSON',
        success: function(data) {
            data.forEach(function(element) {
                var id = element.id;
                var product_name = element.product_name;
                var price = element.price;
                $('#mytable tbody').after
                (
                    '<tr> ' +
                    '<td>' + id + '</td>' +
                    '<td>' + product_name + '</td>' +
                    '<td>' + price + '</td>' +
                    "<input type='hidden' class='price' name='price' value='" + price + "'>" +
                    '<td>' + "<input type = 'text' class='qty' name='qty' value='1'/>" + '</td>' +
                    '<td>' + "<input type = 'text' class='amount' id='amount' disabled/>" + '</td>' +

                    '<td>' +  " <Button type='button' class='btn btn-primary' onclick='deleteProduct(" + id + ")' >Delete</Button> " + '</td>' +
                    '</tr>');
            });
        },
        error: function(xhr, status, error) {
            alert(xhr.responseText);
        }
    });
}

удалить функцию продукта

function deleteProduct(id) {
    $(this).find('deleteProduct').click(function(event) {
        deleteProduct($(event.currentTarget).parent('tr'));
    });
    var total = 0;
    $('.amount').each(function(e){
        total -= Number($(this).val());
    });
    $('#total-amount').text(total);
                $.ajax({
                    type: 'POST',
                    url: 'remove.php',
                    dataType: 'JSON',
                    data: {id: id},
                    success: function (data) {
                    },
                    error: function (xhr, status, error) {
                        alert(xhr.responseText);

                    }
                });
}
</script>

remove.php

<?php
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
    include "db.php";
    $conn = new mysqli($servername, $username, $password, $dbname);
    $stmt = $conn->prepare("delete from cart where id=?");
    $stmt->bind_param("s", $id);
    $id = $_POST["id"];
    if ($stmt->execute())
        {
            echo 1;
        }
    else 
        {
                echo 0;
        }
        $stmt->close();
        }
?>

Answer 1

Я думаю, что ваша проблема связана с js больше, чем с php. Поскольку файлы remove.php выглядят нормально, у вас может быть проблема с AJAX.

function deleteProduct(id) {
$(this).find('deleteProduct').click(function(event) {
    deleteProduct($(event.currentTarget).parent('tr'));
});

Это выглядит странно, так как вы используете jquery "find" для некласса. Может ты забыл точку? Должно быть $ (this) .find (". DeleteProduct") .... и если вы сделаете это, не забудьте добавить класс.

Кроме того, когда вы удаляете свой продукт через ajax, вы никогда не обновляете таблицу, поэтому строка продукта все равно будет присутствовать. Когда вы вычисляете общее количество, вы выбираете текущие элементы таблицы:

 var total = 0;
$('.amount').each(function(e){
    total -= Number($(this).val());
});

это приведет к неправильным значениям, если вы не удалите строку, на которую нажимаете кнопку delete.

$('#total-amount').text(total);
            $.ajax({
                type: 'POST',
                url: 'remove.php',
                dataType: 'JSON',
                data: {id: id},
                success: function (data) {
                },
                error: function (xhr, status, error) {
                    alert(xhr.responseText);

                }
            });

Вы должны добавить к функции обратного вызова success ту часть, где вы вычисляете итоги, но перед этим вам следует удалить строку таблицы с чем-то вроде $ ("...."). Remove ();

Редактировать с правильным кодом: Прежде всего, извлеките слушатель кнопки удаления jquery из функции удаления и сделайте так:

<script>
     $('.mydeletebtn').click(function(event) {
    deleteProduct($(this).data("rowid"));
    });
    function deleteProduct(id) {
     .....
    }

Затем измените вывод HTML для строки удаления, изменив его следующим образом:

'<td>' +  " <Button type='button' class='mydeletebtn btn btn-primary' data-rowid="'+id+'" >Delete</Button> " + '</td>' +

так как вам не нужен онклик, когда вы используете jquery. Я изменил его так, чтобы ваш rowid передавался как атрибут данных javascript.

После всего этого вам нужно обработать удаление строки + полное обновление, например:

    var $parentRow = $(this).closest("tr");
                $.ajax({
                    type: 'POST',
                    url: 'remove.php',
                    dataType: 'JSON',
                    data: {id: id},
                    success: function (data) {
                        $parentRow.delete();
                        updateTotals();
                    },
                    error: function (xhr, status, error) {
                        alert(xhr.responseText);

                    }
                });

Ваш окончательный JS должен быть примерно таким:

<script>
function updateTotals(){
var total = 0;
    $('.amount').each(function(e){
        total -= Number($(this).val());
    });
$('#total-amount').text(total);
}
$('.mydeletebtn').click(function(event) {
        deleteProduct($(this).data("rowid"),$(this));
        });
function deleteProduct(rowid,$row) {
         var $parentRow = $(this).closest("tr");
                    $.ajax({
                        type: 'POST',
                        url: 'remove.php',
                        dataType: 'JSON',
                        data: {id: rowid},
                        success: function (data) {
                            $parentRow.delete();
                            updateTotals();
                        },
                        error: function (xhr, status, error) {
                            alert(xhr.responseText);

                        }
                    });
        }

</script