Showing progress


When doing AJAX requests, you may want to show some sort of progress while waiting for the request to finish, especially if it might take a while for it to do so. It’s actually very simple to do so with jQuery, as you will see from the following example:

<input type="button" name="btnDoRequest" value="Perform calculation"
onclick="PerformCalculation(this);" />
<script type="text/javascript">
function PerformCalculation(sender)
{
        $(sender).val("Working - please wait...");
        $.get("/tests/calc.php", function(data, textStatus)
        {
                $(sender).val("Perform calculation");
                alert(data);
        });
}
</script>

Right before performing the AJAX request, we change the text of the sender (the button which calls the function). As soon as it succeeds, we set it back. That’s the simplest form of progress. Another approach is to show a piece of text somewhere on the page, but the most common way of doing it is to show a little piece of graphic which illustrates that the browser is currently working. You could make one yourself, or even better: Use one of the great online generators, for instance http://ajaxload.info/. I’ve created one, as you can see in the next example:

<input type="button" name="btnDoRequest" value="Perform calculation"
onclick="PerformCalculationWithImageProgress();" />
<img src="/images/ajax-loader.gif" style="display: none;" id="imgProgress" />
<script type="text/javascript">
function PerformCalculationWithImageProgress()
{
        $("#imgProgress").show();
        $.get("/tests/calc.php", function(data, textStatus)
        {
                $("#imgProgress").hide();
                alert(data);
        });
}
</script>

The process is pretty much the same, but instead of setting a text, we show and hide an existing image. You can place the image in a spot that the user is most likely to notice or dynamically place the image next to button/link clicked, if you have more than one. The possibilities are really endless.

There is one problem with the above examples though: If the request fails for some reason, the progress is shown but never removed again. We can fix this by subscribing to the error event, where we can then remove the progress and then show an error message. Check out this example:

<input type="button" name="btnDoRequest" value="Perform calculation"
onclick="PerformCalculationWithErrorHandling(this);" />
<script type="text/javascript">
function PerformCalculationWithErrorHandling(sender)
{
        $(sender).val("Working - please wait...");
        $.get("/tests/non-existing.php", function(data, textStatus)
        {
                $(sender).val("Perform calculation");
                alert(data);
        }).error(function()
        {
                $(sender).val("Try again");
                alert("An error occurred.")
        });
}
</script>

It’s pretty much identical to the first example, but here we call the error function on the returned AJAX object and pass in a callback function which should be called if the request fails, which it will in this example, since I have changed the path for the requested file to something which doesn’t exist.

One thought on “Showing progress

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s