Question

I need to show a progress bar to the user who requests a file to download. I am using J2EE application to generate the file. User will submit the form data to get the file. The server takes all the submitted data manipulates, generates and sends a PDF file back to Client.

So I want to show a progress bar to the user till the file comes to the Client side.
Is there any way to do this ?

Answer 1

If I understand you well, you want to show a progress bar until your server is ready to send a file, not to show the progress of the file beeing downloaded.

If that is true, you’re dealing with a tough excercise. A reliable progressbar needs to know (pretty exact) what you’re doing and how long it will take. In your case, there are lots of unreliable factors (one of them, maybe the biggest, is the web itself).

So most developers use some kind of an “endless” animation to display “work in progress”.

update

Based on your comment, the easiest way to display a “work in progress” animation would look like

$.ajax({
    url:      "/myscripts/myserverscript",
    type:     "POST",
    data:     {
       foo: "bar"
    },
    dataType: "text",
    beforeSend: function(xhr){
        // display a progress animation
    },
    complete: function(xhr, status){
        // hide the animation
    }
    ...
});

In the case of a single request. You may also setup a global ajax event handler for both (.ajaxStart() and .ajaxStop()) to setup the show/hide functionallity.

References: .ajax(), .ajaxStart(), .ajaxStop()