Displaying a Progress Indicator During jQuery Ajax Calls

Unlike traditional full page postback, where a user can easily understand that the page is being processed, Ajax based communication doesn't give any clue to the user about the processing being done in the background. This is especially important when the Ajax calls involve lengthy server side processing. It would be nice if you show some progress indicator or wait message to the end user while making Ajax calls. To that end this article shows one simple way of displaying such a progress indicator.

Have a look at the following figure:

The figure shows an ASP.NET Web Form that contains a Button control. Upon clicking the button an Ajax request is made to an ASP.NET Generic Handler (.ashx). At the same time an animated GIF is displayed as a progress indicator. The generic handler performs some processing and returns a success message to the Web Form. Once the Ajax request completes the animated GIF is hidden from the end user.

The markup of the Web Form looks like this:

<form id="form1" runat="server">
  <asp:Button ID="Button1" runat="server" Text="Make Ajax Call" />
  <div id="progress">
    <asp:Image ID="Image1" runat="server" ImageUrl="~/Progress.gif" />
  </div>
</form>

As you can see the Image control points to Progress.gif and is enclosed inside a <div> element whose ID is progress.

The generic handler (AjaxHandler.ashx) simply mimics a length operation by calling Sleep() method of Thread class. The following code shows how the AjaxHandler.ashx looks like:

public class AjaxHandler : IHttpHandler
{
  public void ProcessRequest(HttpContext context)
  {
    System.Threading.Thread.Sleep(10000);
    context.Response.ContentType = "text/plain";
    context.Response.Write("Data processed successfully!");
  }
  public bool IsReusable
  {
    get
    {
      return false;
    }
  }
}

The ProcessRequest() method makes the current thread sleep for 10 seconds. It then writes a success message onto the response stream.

The jQuery code that makes an Ajax call on the click of the button is shown below:

$(document).ready(function () {
  $("#progress").hide();

  $("#Button1").click(function (evt) {
    var options = {};
    options.url = "ajaxhandler.ashx";
    options.type = "GET";
    options.beforeSend = function () {
      $("#progress").show();
    };
    options.success = function (result) {
      alert(result);
    };
    options.error = function (xhr,status,err) {
      alert(err);
    };
    options.complete = function () {
      $("#progress").hide();
    };
    $.ajax(options);
    evt.preventDefault();
  });
});

The ready() handler hides the progress <div> element as soon as the page loads using hide() method. This way initially the animated GIF is kept hidden. The code then wires an event handler for the click event of Button1. The click event handler creates an options object. The url property of the options object points to the generic handler - AjaxHandler.ashx. The type property is set to GET indicating that a GET request is to be made. The important part is the beforeSend and complete handler functions. The beforeSend callback is called just before making an Ajax request. This is where you need to show the progress indicator (animated GIF in this case) to the end user. Inside the beforeSend function the progress <div> is shown to the user using show() method. The complete callback is called when the Ajax request completes (either successfully or with error). Inside the complete callback you hide the progress <div> using hide() method. The success callback simply shows the message returned from the server in an alert dialog. Similarly, the error handler shows the error message in an alert dialog. Finally, an Ajax call is made using jQuery $.ajax() method.

That's it! Run the web form and test whether the progress indicator is displayed as expected.