Jquery / AJAX Progress Bar

Question

I currently have a simple AJAX page where I submit the data via AJAX and then receieve a response via AJAX which is displayed to the screen. Whilst the server is processing the response I want to create a progress bar. My thinking is that I can send multiple ajax updates back to the client containing the progress which the client, which the client can convert into a progress bar (i.e via bootstrap), until the final response is sent.

Is it poss to send multiple AJAX responses from a single AJAX request or what is the best method for doing this.

Thanks,

Answer 1

If you want your progress bar to be able to show percentages of remaining work, before thinking how to implement this on the client, the first thing you should decide is how to write your server side code so that it supports notifications.

Then there are 2 possible techniques on the client:

1. PUSH
2. PULL

With PUSH notifications you could use HTML5 WebSockets so that the server directly PUSHes the progress to the client.

With PULL, it is the client that has to send AJAX requests at regular intervals to the server which will return the progress of the operation.

If you don't want to be reporting percentages then you could simply show some spinner animation before sending your AJAX request which you will hide when the AJAX request completes.

Answer 2

Have a hidden loading image in the background and when the AJAX call is fired, make it visible using the .show() method. In the success function, hide the image back using .hide() method.

A sample HTML would be:

<div class="ajax-content">
    <img src="loading.gif" alt="Loading" class="loading-gif" />
    <div class="ajax-response">
    </div>
</div>

And the script for the same is as follows:

$(element).click(function(){
    $(".loading-gif").show();
    $.ajax({
        ...
        success: function(){
            $(".loading-gif").hide();
        }
    });
});