jQuery.post() not found-CodePudding

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

CodePudding user response：

"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.

CodePudding user response：

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.

CodePudding user response：

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