javascript - Loading animation disappear before second ajax call -

i showing loading animation whenever ajax call gets started , stops once ajax call completed. works fine when use 1 ajax call in function. if have 2 ajax calls within same function, seems loading animation disappears after first ajax call complete. how can make stay until ajax call 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 got fixed replacing existing .ajaxcomplete call .ajaxstop call.

you can use counter.

• on start increment it,
• on complete, decrement it.
• check see if zero. if is, hide it.

basic idea:

(function(){      var opencount = 0;     $(document).ajaxstart(function() {       opencount++;       showpleasewait();     });      $(document).ajaxcomplete(function() {       opencount--;       if(!opencount) hidepleasewait();     });  }());