Question

In my jquery admin application I quite often get ajax status lingering, there are no errors thrown in the scripts which would half the flow of execution.. I only want to show the bar when there are active ajax requests: Here is the code:

$('#AjaxStatus').ajaxStart(function () {
    $(this).slideUp('fast').delay(1000).slideDown('fast');
});

$('#AjaxStatus').ajaxStop(function () {
    $(this).stop(true, true).slideUp('fast');
});

$('#AjaxStatus').ajaxError(function () {
    $(this).stop(true, true).slideUp('fast');
});

I believe it may be to do with the delay, I only want to show the ajax status though after 1 sec (on faster connection it would be zipping up and down too often)

Answer 1

Hmm, It is most likely have to do with the delay. I’m not sure what you want to achieve but my guess is that you want the ajax status showing for at least 1 sec even if the requests finishes in time less than 1 sec. If this is correct then you can do something like:

Edit: This shows only when the requests take longer than 1 sec:

     $('#AjaxStatus').ajaxStart(function () {
         var $elem = $(this)
         $elem.data("inProgress", true); // set flag in progress
         // show status

         // check flag every second if the request has finished
         var handle = window.setInterval(function() {
            if($elem.data("inProgress") === true) {
               if($elem.is(":hidden")) {
                  $elem.slideDown('fast');
               }
            }else {
               window.clearInterval($elem.data("handle"));
               $elem.slideUp('fast');
            }
         }, 1000);
         $elem.data("handle", handle);
     });

     $('#AjaxStatus').ajaxStop(function () {
        var $elem = $(this);
        // clear the flag
        $elem.data("inProgress", false);
     });

     $('#AjaxStatus').ajaxError(function () {
         $elem.data("inProgress", false);
         window.clearInterval(handle);
     });