jQuery.post() not found

Question

I am trying to create a shopping cart.

I have a function to add products in the cart:

jQuery('#shop-add-btn').click(function () {
            modal.style.display = "block";
            var Product = {
                            idProduct: jQuery(this).data('idproduct'),
                            name: jQuery(this).data('nameproduct'),
                            quantity: jQuery("#quantity").val(),
                            price: jQuery(this).data('price'),
                            poids: jQuery(this).data('poids')
                        };
            addToShoppingCard(Product)
                .done(function (data) {
                    if (data == 'true') {
                        getCountShippingCard().done(function (data) {
                            $('#cardCount').html(data);
                        });
                        alert('Produit ajouté');
                    } else {
                        alert(data);
                    }
                });
            });

So this function calls another function, addToShippingCard:

function addToShoppingCard(Product) {
    return $.post(
        '/app/plugin/shop/process/shipping.php',
        {
            ADDPRODUCTTOCARD: 'OK',
            idProduct: Product.idProduct,
            name: Product.name,
            quantity: Product.quantity,
            singlePrice: Product.price,
            totalPoids: Product.quantity * Product.poids,
            totalPrice: shop_financial(Product.quantity * Product.price)
        });
}

But when I try to run it, I receive this error message from the console:

base_shop.js:104 Uncaught TypeError: Cannot read properties of undefined (reading 'post')
    at getCountShippingCard (base_shop.js:104:14)
    at Object.<anonymous> (e-billet-enfant-journee:415:25)
    at fire (jquery-1.12.4.js:3232:31)
    at Object.fireWith [as resolveWith] (jquery-1.12.4.js:3362:7)
    at done (jquery-1.12.4.js:9840:14)
    at XMLHttpRequest.callback (jquery-1.12.4.js:10311:8)
getCountShippingCard    @   base_shop.js:104
(anonyme)   @   e-billet-enfant-journee:415
fire    @   jquery-1.12.4.js:3232
fireWith    @   jquery-1.12.4.js:3362
done    @   jquery-1.12.4.js:9840
callback    @   jquery-1.12.4.js:10311
XMLHttpRequest.send (asynchrone)        
send    @   jquery-1.12.4.js:10254
ajax    @   jquery-1.12.4.js:9738
jQuery.<computed>   @   jquery-1.12.4.js:9890
addToShoppingCard   @   base_shop.js:89
(anonyme)   @   e-billet-enfant-journee:412
dispatch    @   jquery-1.12.4.js:5226
elemData.handle @   jquery-1.12.4.js:4878

Can anyone help me and explain me what's the problem here? Why doesn't the navigator recognize the post function?

Thanks for your help

Answer 1

"Cannot read properties of undefined (reading 'post')" means the $.post function is not defined.

It is possible that the jQuery library is not properly loaded in your HTML file, or that it is being loaded after the base_shop.js file, so the $ object is not yet available when the base_shop.js file is being executed.

Try to import the "base_shop.js" file after jquery, for example, like so;

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="/path/to/base_shop.js"></script>

Alternatively, you can also try to this;

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  $(function() {
    // do stuff here
  });
</script>

This ensures that the code in the base_shop.js file is only executed after the jQuery library has been loaded and the $ object is available.

Answer 2

JQuery is probably in compatibility mode to avoid conflict with other javascript libraries. Thus it is not loaded in DOM when you are using $ sign.

by default, jQuery uses $ as a shortcut for jQuery. Thus, if you are using another JavaScript library that uses the $ variable, you can run into conflicts with jQuery. In order to avoid these conflicts, you need to put jQuery in no-conflict mode immediately after it is loaded onto the page and before you attempt to use jQuery on your page.

We can have JQuery like the following:

/* Normal jQuery */
$.post();
/* "Safe" jQuery */
jQuery.post();

In your case, you need to choose safe JQuery approach.

Answer 3

Thanks @Lilith

I tried your second suggestion.

Here is the error I received:

jquery-3.6.0.min.js:2 Uncaught TypeError: e.indexOf is not a function
at S.fn.load (jquery-3.6.0.min.js:2:84932)
at HTMLDocument.<anonymous> (custom.js?v=2:158:15)
at e (jquery-3.6.0.min.js:2:30038)
at t (jquery-3.6.0.min.js:2:30340)
S.fn.load @ jquery-3.6.0.min.js:2
(anonyme) @ custom.js?v=2:158
e @ jquery-3.6.0.min.js:2
t @ jquery-3.6.0.min.js:2
setTimeout (asynchrone)
S.readyException @ jquery-3.6.0.min.js:2
(anonyme) @ jquery-3.6.0.min.js:2
e @ jquery-3.6.0.min.js:2
t @ jquery-3.6.0.min.js:2
setTimeout (asynchrone)
(anonyme) @ jquery-3.6.0.min.js:2
c @ jquery-3.6.0.min.js:2
fireWith @ jquery-3.6.0.min.js:2
fire @ jquery-3.6.0.min.js:2
c @ jquery-3.6.0.min.js:2
fireWith @ jquery-3.6.0.min.js:2
t @ jquery-3.6.0.min.js:2
setTimeout (asynchrone)
(anonyme) @ jquery-3.6.0.min.js:2
c @ jquery-3.6.0.min.js:2
fireWith @ jquery-3.6.0.min.js:2
fire @ jquery-3.6.0.min.js:2
c @ jquery-3.6.0.min.js:2
fireWith @ jquery-3.6.0.min.js:2
ready @ jquery-3.6.0.min.js:2
B @ jquery-3.6.0.min.js:2