Show Spinner With One Or More Async Ajax Requests

Question

I have a web page. This page is start like as:

$(function () {
  PageFunction_1();
  PageFunction_2();
  PageFunction_3();
  PageFunction_4();
});

function PageFunction_1(){
  $.ajax({
        url : endpoint1,
        type : "post",
        async : true,
        success : function(data) {
                //load data to html divs
        }
    });
}

function PageFunction_2(){
  $.ajax({
        url : endpoint2,
        type : "post",
        async : true,
        success : function(data) {
                //load data to html divs
        }
    });
}

function PageFunction_3(){
  $.ajax({
        url : endpoint3,
        type : "post",
        async : true,
        success : function(data) {
                //load data to html divs
        }
    });
}

function PageFunction_4(){
  $.ajax({
        url : endpoint4,
        type : "post",
        async : true,
        success : function(data) {
                //load data to html divs
        }
    });
}

I want to show spinner while page is loading. All ajax requests are async.So that i can't decided which one is last. I change this code like as below:

    $(function () {
      PageFunction_1();
      PageFunction_2();
      PageFunction_3();
      PageFunction_4();
    });

    function PageFunction_1(){
      $.ajax({
            url : endpoint1,
            type : "post",
            async : true,
            success : function(data) {
                    //load data to html divs
            },
          beforeSend: function (XMLHttpRequest) {
            XMLHttpRequest.setRequestHeader("Accept", "application/json");
            waitingDialog.show('page is loading');
          },
        complete: function () {
            debugger;
            waitingDialog.hide();
        }
        });
    }

    function PageFunction_2(){
      $.ajax({
            url : endpoint2,
            type : "post",
            async : true,
            success : function(data) {
                    //load data to html divs
            }
,
          beforeSend: function (XMLHttpRequest) {
            XMLHttpRequest.setRequestHeader("Accept", "application/json");
            waitingDialog.show('page is loading');
          },
        complete: function () {
            debugger;
            waitingDialog.hide();
        }
        });
    }

    function PageFunction_3(){
      $.ajax({
            url : endpoint3,
            type : "post",
            async : true,
            success : function(data) {
                    //load data to html divs
            }
,
          beforeSend: function (XMLHttpRequest) {
            XMLHttpRequest.setRequestHeader("Accept", "application/json");
            waitingDialog.show('page is loading');
          },
        complete: function () {
            debugger;
            waitingDialog.hide();
        }
        });
    }

    function PageFunction_4(){
      $.ajax({
            url : endpoint4,
            type : "post",
            async : true,
            success : function(data) {
                    //load data to html divs
            }
,
          beforeSend: function (XMLHttpRequest) {
            XMLHttpRequest.setRequestHeader("Accept", "application/json");
            waitingDialog.show('page is loading');
          },
        complete: function () {
            debugger;
            waitingDialog.hide();
        }
        });
    }

But spinner is not shown at all loading time. How can i show spinner with more than one async ajax requests ?

Your functions are all the same. Why do you have four of them? — Tomalak, Mar 27 '18 at 21:09
Not the same, all functions make request with different url. I will be edit question to make urls different. — Mert Özoğul, Mar 27 '18 at 22:28
That's irrelevant. The functions are completely equal, they simply miss an URL parameter. Don't do copy-and-paste programming. That's the very first thing you should fix. — Tomalak, Mar 28 '18 at 07:46
Noble your comment is irrelevant. What is copy-paste programming. These codes were used to show problem. They look like pseudo code. These functions are completely different. Do you understand question ?? — Mert Özoğul, Mar 29 '18 at 00:30

score 0 · Accepted Answer · answered Aug 19 '18 at 16:55

I read difference async and sync requests tutorial. And i learnt this question answer. I thought asynchronous but i wrote code synchronous. Code should be as follows (with asyn=true):

<script>
    $(function () {
      PageFunction_1();
    });

    function PageFunction_1(){
      $.ajax({
            url : endpoint1,
            type : "post",
            async : true,
            success : function(data) {
                    //load data to html divs
            },
          beforeSend: function (XMLHttpRequest) {
            XMLHttpRequest.setRequestHeader("Accept", "application/json");
            waitingDialog.show('page is loading');
          },
        complete: function () {
            debugger;
            PageFunction_2();
        }
        });
    }

    function PageFunction_2(){
      $.ajax({
            url : endpoint2,
            type : "post",
            async : true,
            success : function(data) {
                    //load data to html divs
            }
,
          beforeSend: function (XMLHttpRequest) {
            XMLHttpRequest.setRequestHeader("Accept", "application/json");

          },
        complete: function () {
            debugger;
            PageFunction_3();
        }
        });
    }

    function PageFunction_3(){
      $.ajax({
            url : endpoint3,
            type : "post",
            async : true,
            success : function(data) {
                    //load data to html divs
            }
,
          beforeSend: function (XMLHttpRequest) {
            XMLHttpRequest.setRequestHeader("Accept", "application/json");

          },
        complete: function () {
            debugger;
            PageFunction_4();
        }
        });
    }

    function PageFunction_4(){
      $.ajax({
            url : endpoint4,
            type : "post",
            async : true,
            success : function(data) {
                    //load data to html divs
            }
,
          beforeSend: function (XMLHttpRequest) {
            XMLHttpRequest.setRequestHeader("Accept", "application/json");
          },
        complete: function () {
            debugger;
            waitingDialog.hide();
        }
        });
    }
</script>

Warning spinner message is shown when these functions run with asynchronous.

Show Spinner With One Or More Async Ajax Requests

1 Answers1