加载动画在第二个ajax调用之前消失

Question

I am showing loading animation whenever ajax call gets started and stops once the ajax call is completed. It works fine when i use only one ajax call in function. However if i have two ajax calls within same function, it seems like the loading animation disappears after first ajax call is complete. How can i make it stay until all ajax call is complete?

Thanks.

Javascript in main.js file:

//Show loading image on Ajax Start
    $(document).ajaxStart(function() {
      showPleaseWait();
    });

    //Hide loading image on Ajax complete
    $(document).ajaxComplete(function() {
      hidePleaseWait();
    });

Javascript in Employee page:

<script type="text/javascript">
        $(document).ready(function () {
            $("#ddlEmployeeNumber").change(function () {
                $("#log").ajaxError(function (event, jqxhr, settings, exception) {
                    alert(exception);
                });

                var employeeNumberSelected = $("select option:selected").first().text();

                $.get('@Url.Action("EmployeeSelfServiceInfo")',
                    { chosenEmployeeNumber: employeeNumberSelected }, function (data) {
                        $("#EmployeeSelfServiceInfo").html(data);
                    });

                $.get('@Url.Action("GetEmployeeName")',
                    { chosenEmployeeNumber: employeeNumberSelected }, function (data) {
                        $("#employeeName").text(data);
                    });
            });
        });
</script>




function showPleaseWait() {
    var modalLoading = '<div class="modal" id="pleaseWaitDialog" data-backdrop="static" data-keyboard="false role="dialog">\
        <div class="modal-dialog">\
            <div class="modal-content">\
                <div class="modal-header">\
                    <b>Processing...</b>\
                </div>\
                <div class="modal-body center-block">\
                    <div class="progress">\
                      <div class="progress-bar progress-bar-striped active" role="progressbar"\
                      aria-valuenow="100" aria-valuemin="100" aria-valuemax="100" style="width:100%;">\
                          Please Wait...\
                      </div>\
                    </div>\
                </div>\
            </div>\
        </div>\
    </div>';
    $(document.body).append(modalLoading);
    $("#pleaseWaitDialog").modal("show");
}

 function hidePleaseWait() {
    $("#pleaseWaitDialog").modal("hide");
}

UPDATE: So i got it to fixed by replacing existing .ajaxComplete call with .ajaxStop call.

Answer 1

You may keep a variable to track mutiple ajax calls.

var ajaxCallCounter=0;
//Show loading image on Ajax Start
$(document).ajaxStart(function() {
  showPleaseWait();
});

//Hide loading image on Ajax complete
$(document).ajaxComplete(function() {
  if(ajaxCallCounter===0)
  {
    hidePleaseWait();
  }
});

Every time you make an ajax call, increase this variable. When your ajax call gets a response from server, decrease it.

ajaxCallCounter++;
$.get('@Url.Action("EmployeeSelfServiceInfo")',function(res){
   ajaxCallCounter--;
   //do something with the  res
});

In the above example, we used a simple global variable ( Which is not so good ) !.You may use javascript namespacing for declaring the variable to prevent possible overwriting of the value of this variable or wrap your code inside an IIFE .

Answer 2

You can use a counter.

• On start increment it,
• On complete, decrement it.
• Check to see if it is zero. If it is, hide it.

Basic idea:

(function(){

    var openCount = 0;
    $(document).ajaxStart(function() {
      openCount++;
      showPleaseWait();
    });

    $(document).ajaxComplete(function() {
      openCount--;
      if(!openCount) hidePleaseWait();
    });

}());

Answer 3

don't use ajaxStart and ajaxComplete, you can bind those calls to each $.get instead:

            $.get('@Url.Action("EmployeeSelfServiceInfo")',
                { chosenEmployeeNumber: employeeNumberSelected }, 
                beforeSend: showPleaseWait,
                complete:  hidePleaseWait,
                function (data) {
                    $("#EmployeeSelfServiceInfo").html(data);
                });


            $.get('@Url.Action("GetEmployeeName")',
                { chosenEmployeeNumber: employeeNumberSelected },  
                beforeSend: showPleaseWait,
                complete:  hidePleaseWait,
                function (data) {
                    $("#employeeName").text(data);
                });

The problem is that since those are async calls, the hide/show on those elements will look weird, probably.