When i click on the button, this error is blow up! help pls When i click on the button, this error is blow up! help pls

TypeError: $.ajax is not a function

$(document).on('click', '.item_add', function(e){
        e.preventDefault();
        product_id          = $(".product_id").html();
        product_name        = $(".product_name").html();
        product_price       = parseFloat($(".item_price").html())   
        product_size        = $(".bann-size").val();
        url                 = '/basket_adding/'
        var data            = {};
        data.product_id     = product_id
        data.product_name   = product_name
        data.product_price  = product_price
        data.product_size   = product_size

        $.ajax({
            url: url,
            type: 'POST',
            data: data,
            cache: true,
            success: function(data){
                console.log("OK");


            },
            error: function(data){
                console.log(data + "ERROR")
                alert("Something wrong, try again!")
                location.reload();
            }
        });
    });

When i click on the button, this error is blow up! help pls When i click on the button, this error is blow up! help pls

TypeError: $.ajax is not a function

$(document).on('click', '.item_add', function(e){
        e.preventDefault();
        product_id          = $(".product_id").html();
        product_name        = $(".product_name").html();
        product_price       = parseFloat($(".item_price").html())   
        product_size        = $(".bann-size").val();
        url                 = '/basket_adding/'
        var data            = {};
        data.product_id     = product_id
        data.product_name   = product_name
        data.product_price  = product_price
        data.product_size   = product_size

        $.ajax({
            url: url,
            type: 'POST',
            data: data,
            cache: true,
            success: function(data){
                console.log("OK");


            },
            error: function(data){
                console.log(data + "ERROR")
                alert("Something wrong, try again!")
                location.reload();
            }
        });
    });

• javascript
• jquery
• ajax

• 1 well, does your page import jquery before YOUR CODE? – Federico klez Culloca Commented Sep 20, 2017 at 10:05
• simple: load jquery – Jaromanda X Commented Sep 20, 2017 at 10:05
• how to load jquery? if in base template, yes it is! – InvictusManeoBart Commented Sep 20, 2017 at 10:06
• 3 jQuery is probably loaded since the error is thrown only on $.ajax and jQuery is called before. It may be overridden by something else, or OP has a custom jQuery version. – Serge K. Commented Sep 20, 2017 at 10:15

2 Answers 2

It sounds like you could be using jquery slim which doesn't have ajax support. Use:

<script src="https://code.jquery./jquery-3.2.1.min.js"></script>

for ajax support

I have occurred same problem, but I fixed this problem by following link. If you have linked jquery.js or jquery-min.js then go to its code and search ajax( If this code is not found in your code then use this link instead of your jquery link.

<script src="https://code.jquery./jquery-3.2.1.min.js"></script>

Another problem can occur if you are using jquery-slim-min.js