没有被调用ajaxComplete

Question

I can't figure out why this isn't working, i've looked at many questions here at stackoverflow but can't find anything wrong with my code.

I have a #loading div that i want to remove when the ajax call is complete. This is my code and ajaxComplete is never called.

What am i doing wrong?

 $(document).ajaxStart(function () {
        console.log("ajax start");
        $("#loading").show();
    });
    $(document).ajaxComplete(function () {
        console.log("ajax complete");
        $("#loading").remove();
    });

    $(document).ready(function () {


        $.ajax({
            type: 'GET',
            url: '@Url.Content("~/Service/listAllDevices")' + '?limit=' + 300 + '&offset=' + 10,
            dataType: 'json',
            async: 'false',
            global: true,
            success: function (listAllDevicesResponse) {
                console.log("ajax done");
                console.log(listAllDevicesResponse);
            }
        });

    });

Answer 1

There is no ajaxComplete event handler for the $.ajax object, instead use done or always. There is also the complete event handler but it was deprecated as of jQuery 1.8.

 $(document).ajaxStart(function () {
    console.log("ajax start");
    $("#loading").show();
});

$(document).ready(function () {

    $.ajax({
        type: 'GET',
        url: '@Url.Content("~/Service/listAllDevices")' + '?limit=' + 300 + '&offset=' + 10,
        dataType: 'json',
        async: 'false',
        global: true,
        success: function (listAllDevicesResponse) {
            console.log("ajax done");
            console.log(listAllDevicesResponse);
        },
        always: function() {
          console.log("ajax complete");
          $("#loading").remove();            
        }
    });

});

You can read more about the jQuery $.ajax here.

Answer 2

I am not quite sure why your complete function is not called, however I would recommend using stop. ajaxComplete is called everytime an INDIVIDUAL ajax request finished. ajaxStop is called when ALL requests have finished. Like so:

$(document).ajaxStart(function () {
    console.log("ajax start");
    $("#loading").show();
});

$(document).ajaxStop(function () {
    console.log("ajax complete");
    $("#loading").hide();
});

References:

https://api.jquery.com/ajaxStart/

https://api.jquery.com/ajaxStop/