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 plete. 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 plete");
        $("#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);
            }
        });

    });

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 plete. 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 plete");
        $("#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);
            }
        });

    });

• javascript
• jquery
• ajax

Share Improve this question Follow edited Jun 26, 2015 at 14:24 Sumurai8 20.8k1111 gold badges6969 silver badges102102 bronze badges asked Sep 11, 2014 at 13:34 Lord VermillionLord Vermillion 5,4242323 gold badges7171 silver badges112112 bronze badges 6

• You might want to hide the loading tag on ajax plete instead of remove it. Is your ajaxStart function getting called? Have you tried some Console.log to see if the method is getting called but not doing what you expect? – Shriike Commented Sep 11, 2014 at 13:37
• 1 So you didn't see "ajax done" in console? You should add error handler and inspect what is going wrong. – Regent Commented Sep 11, 2014 at 13:37
• Ajax done is fired, i also addes console.logs to Start and Complete, but they never go off. – Lord Vermillion Commented Sep 11, 2014 at 13:38
• @Shriike you can see my logs in the code now, only ajax done and my objects get printed in the console. – Lord Vermillion Commented Sep 11, 2014 at 13:44
• Have you tried on $(document).on("ajaxComplete", (){ $("#loading").remove(); }) – Bowenac Commented Sep 11, 2014 at 13:45

 |  Show 1 more ment

2 Answers 2

Sorted by: Reset to default 2

There is no ajaxComplete event handler for the $.ajax object, instead use done or always. There is also the plete 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 plete");
          $("#loading").remove();            
        }
    });

});

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

I am not quite sure why your plete function is not called, however I would remend 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 plete");
    $("#loading").hide();
});

References:

https://api.jquery./ajaxStart/

https://api.jquery./ajaxStop/