How do I give the user a progress bar

Question

I have this site here

I have an ajax request that calls a php page via this command

var successCallback = function(responseText, textStatus, XMLHttpRequest) {
 // rebind your event handlers here
   // blue item expand
   $('.item-blue .btn-expand').click(function () {

       var btn = $(this);
       $(this).parent().prev().slideToggle(function () {
           btn.toggleClass('btn-expand-h');
       });
       return false;
   });
};

$("#main_content").load("/pre_config/function.php?type="+type+"piz&count=1", successCallback );

It works well but this is calling a php page which does a database query so sometimes this might be slow and it lags a bit at times. I was wondering if there was a clean way to do a progress bar so when the use clicks on the top dropdown the progress bar appears so the user wont get the lag or worse a long wait time for db bottleneck

Answer 1

If you don't have any other ajax requests on the page, you can use the ajaxStart() function to define a global event handler for all ajax events. You can use it like this:

var main = $('#main_content');

main.ajaxStart(function(){
  main.empty().append("<img id="throbber" src='throbber.gif' alt='Loading. Please wait.' />");
});

Where throbber.gif is something like this, generated from this website: http://www.ajaxload.info/

Or else you can also attach this line to the click event handler.