Обновление количества продукта с AJAX имеет проблему

Question

У меня странная проблема с использованием AJAX для увеличения количества продуктов.

Эта проблема существует только при наличии более 1 продукта на одной странице корзины.

Допустим, есть 2 продукта. И заказ товара упорядочен по идентификатору товара от верхнего до нижнего.

Если я увеличу количество первого продукта в списке, это приведет к увеличению количества. Если я тогда увеличу количество второго продукта, то оно увеличится.

Но если я выберу второй продукт для начала и увеличу количество, на котором он не работает, в предупреждении отобразится старое количество (см. Jquery AJAX код).

То же самое происходит, когда у меня есть 3 продукта и т. Д. c.

Количество обновляется только в том случае, если я изменяю количество с ВВЕРХ на ВНИЗ в списке, а затем с НАИБОЛЬШЕГО идентификатора на более низкий идентификатор.

Я не понимаю, почему он так себя ведет, и я много пробовал, но ничего не помогло.

Может кто-нибудь объяснить мне, почему код ведет себя так и как это можно исправить?

PHP update_quantity. php

<?php
session_start();
include('config/database_connection.php');
// get the product id
echo $id = isset($_GET['id']) ? $_GET['id'] : 1;
echo $quantity = isset($_GET['quantity']) ? $_GET['quantity'] : "";

// make quantity a minimum of 1
$quantity=$quantity<=0 ? 1 : $quantity;

// remove the item from the array
unset($_SESSION['cart'][$id]);

// add the item with updated quantity
$_SESSION['cart'][$id]=array(
    'quantity'=>$quantity
);

?>

корзина. php где количество может обновляться

    while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
        extract($row);
       echo "<form class='update-quantity-form'>";
       echo "<div class='product-id' style='display:none;'>{$id}</div>";
       echo "<div class='input-group'>";
       echo "<input type='number' name='quantity' value='{$quantity}' class='form-control cart-quantity' min='1' />";
      echo "<span class='input-group-btn changeUpdateButton'>";
      echo "<button href='{$id}' class='btn update-quantity' type='submit'>Update</button>";
       echo "</span>";
        echo "</div>";
       echo "</form>";
}

Jquery AJAX количество обновлений

 $(document).ready(function(){
//Add to cart PRODUCT selected code
  $(".update-quantity").click(function(e){
        var id = $(this).attr("href");
        var quantity = $('.update-quantity-form').find('.cart-quantity').val();
                $.ajax({
          url: "update_quantity.php",
          type: "GET", //send it through get method
          data: {
            id: id,
            quantity: quantity,
          },
          success: function(response) {
                        alert(response);
          },
          error: function(xhr) {
            //Do Something to handle error
          }
        });
    });
 });

Код с тем, что я использовал ДО использования Jquery AJAX, который работает

    // update quantity button listener
$('.update-quantity-form').on('submit', function(){

    // get basic information for updating the cart
    var id = $(this).find('.product-id').text();
    var quantity = $(this).find('.cart-quantity').val();

    // redirect to update_quantity.php, with parameter values to process the request
    window.location.href = "update_quantity.php?id=" + id + "&quantity=" + quantity;
    return false;
  });
```

Answer 1

$('.update-quantity-form').find('.cart-quantity').val()

будет получать количество из первой формы на странице, а не формы, в которой щелкнул пользователь. Используйте

$(this).closest('.update-quantity-form').find('.cart-quantity').val()

, чтобы получить количество из той же формы.

Кроме того, вы не должны использовать нестандартные атрибуты в HTML элементах. href недопустимо в <button>, оно используется только для <a>. Чтобы добавить специфичные для приложения данные c к элементам, используйте атрибуты data-XXX, к которым можно получить доступ в jQuery с помощью метода .data().

Поэтому измените его на:

echo "<button data-id='{$id}' class='btn update-quantity' type='submit'>Update</button>";

и затем используйте $(this).data('id') вместо $(this).attr('href').