Ajax request doesn't work all times

Question

So I have a number inside a div like this

<div style="display:inline" id="contItems">0</div>

and I am updating this number depending on the amount of items there are inside this cart from the controller and I am returning an Int and I need to replace the number inside the Div with the new Int, so I did this Ajax request:

function CountItemsDiv() {

            $.ajax({
                type: "GET",
                url: '/Cart/CountItems',
                cache: false,
                success: function (data) {
                      $('#contItems').html(data);

                }
            });
        }

and I call this function CountItemsDiv() when page loads and also when the user adds or removes a product and it works... but not all the times, sometimes it will change the number but some others it will not, I would say it would work 60% of the times someone would click on Add or Remove, I've tried to set cache to false but it still does it, what else could this be?

Answer 1

Yes, you need async function in false,async false waiting for request with all items.

function CountItemsDiv() {
     $.ajax({
                type: "GET",
                url: '/Cart/CountItems',
                cache: false,
                async : false,
                success: function (data) {
                      $('#contItems').html(data);

                }
            });
}