Depending on type of AJAX request show LoadingGif

I have 1 POST ajax and 1 GET ajax, and I have this:

  $(document).ready(function () {

        $(document).ajaxStart(function () {
            $("#div28").show();
        });
        $(document).ajaxStop(function () {
            $("#div28").hide();
        });

    });

It is for showing the LoadingGif, at this point it is showing for both Ajax requests, so what should I do to make the LoadingGif show only when the POST type ajax is working?

EDIT: Here are my ajax functions:

 $(document).ready(function () {
        $.ajax({
            contentType: "application/json; charset=utf-8",
            type: 'GET',
            url: 'api/Appointments/', 
            dataType: 'json',
            success: function (result) {
                if ((result.AppTime = "9:00") && (result.AppWithYritys = "Laakkonen")) {
                    document.getElementById("A9").style.background = "red";
                }
                else {
                    alert("error1");
                }
            },
            error: function (error) {
                alert("error");
            },
        });
    });

and the POST ajax:

  var request = $.ajax({
            type: "POST",
            data: JSON.stringify(app),
            url: "/api/Appointments",
            contentType: "application/json",
            dataType: "html"
        });

        request.done(function (data) {
            if (data != -1) {
                alert("You Have successfully made an appointment");
                location.assign("http://tid.fi");
            }
            else {
                alert("There has been an error!");
            }
        });

        request.fail(function (gr) {
            location.assign("http://google.com");
        });
    };

POST ajax is in a custom function which is trigger on a button-click. Just an info.

Answers 1

  • using ajaxSend and ajaxComplete you can see what the "type" of request is

    However, you'll need to keep a count of active requests too - possibly not required for your simple page - but it's good to have

    $(document).ready(function () {
        var started = 0;
        $(document).ajaxSend(function (event, jqXHR, settings) {
            if (settings.type == 'POST') {
                if(!(started++)) { // only need to show on the first simultaneous POST
                    $("#div28").show();
                }
            }
        });
        $(document).ajaxComplete(function (event, jqXHR, settings) {
            if (settings.type == 'POST') {
                if(!(--started)) { // only hide once all simultaneous POST have completed
                    $("#div28").hide();
                }
            }
        });
    });
    

    Solution without counters

    $(document).ready(function () {
        $(document).ajaxSend(function (event, jqXHR, settings) {
            if (settings.type == 'POST') {
                $("#div28").show();
            }
        });
        $(document).ajaxStop(function () {
            $("#div28").hide();
        });
    });
    

    This will show on POST, and hide once all ajax has stopped - a little less obvious, but it's probably just as valid a solution


Related Articles