[ad_1]
私は問題があります。 カートに商品が入っていますが、これらの商品をカートから削除する関数を作成します。 どういうわけか、関数はそれが定義されていると認識していないようです。 これを修正するにはどうすればよいですか? ドームのデバッグを行ったところ、このjsエラーに気づきました。
Uncaught ReferenceError: removeItemFromCart is not defined onclick https://splashonline.co.za/home.php:1
私が試したこと:
JavaScript
$(document).ready(function() { $(".add-to-cart-btn").click(function(e) { e.preventDefault(); var productId = $(this).data("id"); console.log("Product ID:", productId); var productName = $(this).data("product-name"); var productImage = $(this).data("product-image"); var quantity = parseInt($("#quantity-input").val()); //store the product ID in the session. var productImage = "img/" + productId + ".jpg"; var productPrice = parseFloat($("#product-price-" + productId).text().replace("R", "")); var totalPrice = productPrice * quantity; //store the product details in the session. var cartItems = JSON.parse(sessionStorage.getItem("cartItems")) || []; cartItems.push({ productId: productId, quantity: quantity, productImage: productImage, productName: productName }); sessionStorage.setItem("cartItems", JSON.stringify(cartItems)); $.ajax({ type: "POST", url: "add-to-cart.php", data: { productId: productId }, success: function(response) { alert(response); updateCartBadge(); // Update the cart badge with the new count getCartItem(); // Refresh the cart items after adding }, error: function(xhr, status, error) { alert("An error occurred while adding the item to the cart."); console.log(xhr.responseText); } }); }); // Function to update cart badge. function updateCartBadge(userId) { $.ajax({ type: "GET", url: "getCartItemCount.php", data: { userId: userId}, success: function (response) { console.log('Cart Item Count:', response); $("#cart-badge").text(response); // Update the cart badge count }, error: function (xhr, status, error) { alert("An error occurred while retrieving the cart item count."); console.log(xhr.responseText); } }); } // Function to update cart items in the modal function updateCartItems(cartData) { var cartItems = cartData.cartItems; var cartContainer = $("#cart-items"); // Clear the previous content cartContainer.empty(); // Loop through the cart items and add them to the HTML cartItems.forEach(function (item) { var totalPrice = item.totalPrice || 0; // Ensure totalPrice is a valid number or set it to 0 var cartItemHtml = ` <tr> <td>${item.product_name}</td> <td><img src="https://www.codeproject.com/Questions/5369470/${item.product_image}" alt="${item.product_name}" class="img-thumbnail"></td> <td>R${totalPrice.toFixed(2)}</td> <td>${item.quantity}</td> <td><button class="btn btn-danger btn-sm" data-productId="${item.product_id}" onclick="removeItemFromCart(${item.product_id})">Remove </button></td> </tr> `; // Append the cart item HTML to the container cartContainer.append(cartItemHtml); }); // Update the total price var totalPriceContainer = $("#total-price"); totalPriceContainer.text("Total Price: R" + cartData.totalPrice.toFixed(2)); } // Use event delegation to handle click events for // "Remove" buttons inside the modal $("#cartModal").on("click", ".remove-cart-item", function () { var productId = $(this).data("productId"); removeItemFromCart(productId); }); //removing item from cart. function removeItemFromCart(productId) { $.ajax({ type: "POST", url: "removeCartItem.php", data: { productId: productId }, // Include the product ID in the data dataType: "json", success: function (response) { if (response.success) { // Item removed successfully, update the cart display getCartItemsForModal(); updateCartItems(); } else { alert(response.message); // Display the error message from the server } }, error: function (xhr, status, error) { alert("An error occurred while removing the item from the cart."); console.log(xhr.responseText); }, }); } // Call the backend to fetch cart data when the cart modal is opened $("#cartModal").on("show.bs.modal", function () { $.ajax({ type: "GET", url: "getCartData.php", dataType: "json", success: function (cartData) { console.log("Response from the server:", cartData); updateCartItems(cartData); updateCartBadge(); }, error: function (xhr, status, error) { alert("An error occurred while fetching cart item details"); console.log(xhr.responseText); } }); }); // function to populate the cart modal with cart items. function getCartItemsForModal() { $.ajax({ type: "GET", url: "getCartItem.php", dataType: "html", success: function (response) { $("#cart-items").html(response); }, error: function (xhr, status, error) { console.log("An error occured while retrieving cart items"); console.log(xhr.responseText); }, }); } updateCartItems(); //call getCartItemsForModal function. $("#cart-badge-btn").click(function () { getCartItemsForModal(); }); // function to get item from the cart. function getCartItem() { $.ajax({ type: "GET", url: "getCartItem.php", success: function(response) { $("#cart-items").html(response); // Update the cart items on the page }, error: function(xhr, status, error) { alert("An error occurred while retrieving the cart items."); console.log(xhr.responseText); } }); } // Call updateCartBadge and getCartItem on page load updateCartBadge(); getCartItem(); });
解決策 1
あなたが投稿したものはすべて、 (document).ready(function() {} );
範囲。
つまり、ボタン クリック ハンドラー (そのスコープの外にある) が呼び出そうとするときのように、その関数の外には存在しません。 removeItemFromCart
。
コードを見直して、 document.ready
関数は存在しますが、定義した他のすべての関数は存在しません。 それらは外側にある必要があります document.ready
。
[ad_2]
コメント