Click here to Skip to main content
15,886,919 members
Please Sign up or sign in to vote.
1.00/5 (1 vote)
See more:
I have a problem. I have an item from the cart but now create a function to remove these item from the cart. Somehow, the function does not seem to see it as being defined. How do I fix this? I did dome debugging and noticed this js error.
Uncaught ReferenceError: removeItemFromCart is not defined
    onclick https://splashonline.co.za/home.php:1


What I have tried:

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="${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();
});
Posted
Updated 4-Oct-23 9:16am
v2

1 solution

EVERYTHING you posted is defined inside the (document).ready(function() {} ); scope.

That means it doesn't exist outside of that function, like when a button click handler (which is outside that scope) tries to call removeItemFromCart.

Look over your code and make sure ONLY the stuff that belongs in the document.ready function is there and not every other function you defined. Those must be outside the document.ready.
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900