On our web application, we have loads of attachments, some static (from DB) and some dynamic (generated), some of the generated files take really long (Content-Disposition: Attachment) to download, and the user will click away sometimes. is there anyway to show and HIDE a loader as soon as the file is actually served to the browser?

I have looked for similar questions on stackoverflow and there are, but none of them with useful answers: for example.

Is this a viable question or should i just try to increase the speed at which the files are generated?

On our web application, we have loads of attachments, some static (from DB) and some dynamic (generated), some of the generated files take really long (Content-Disposition: Attachment) to download, and the user will click away sometimes. is there anyway to show and HIDE a loader as soon as the file is actually served to the browser?

I have looked for similar questions on stackoverflow and there are, but none of them with useful answers: for example.

Is this a viable question or should i just try to increase the speed at which the files are generated?

• java
• javascript
• jsp
• servlets

• 1 Is this the delay between clicking the link and generating the file, or the actual downloading of a file? – TJHeuvel Commented Sep 13, 2011 at 8:45
• It is the delay between clicking and the file-download dialog box showing. – epoch Commented Sep 13, 2011 at 8:49
• Duplicate with answer: stackoverflow./questions/1106377/… – Poma Commented Jul 14, 2015 at 16:17

3 Answers 3

For that you can use the following post from this munity:-

JavaScript/jQuery to download file via POST with JSON data

Use javascript post method that I mentioned first. Hope this finally answers your question. :)

You can use ajax code for doing form submit. While the server processes the request, show a div with loading icon at top of the page.

Write following code in your jsp.

<div  id="submitPage">
  <img src="/images/loading.gif" alt="">Submitting order...
</div>

initially hide it by using this code

$('#submitPage').hide();

and on click of your submit button just show it.

$('#submitPage').show();

Hide it again when ajax response es.

Hope it solves your problem.

Regards, Lav

you need not load the page again. Simply play around with the ajax call with a bit of javascript manipulation. :)

$('#submitPage').show();

var url = "urlUsed";

$.post(url, $("#formName").serialize() , function(responseValue){                   

    $('#submitPage').hide();

});

If not this way, you can change ajax call as :-

function functionName(){
    ajaxRequest = createXMLHttpRequest(); 
    var url = "urlUsed";
    $('#submitPage').show();
    ajaxRequest.open('get', url , true);
    ajaxRequest.onreadystatechange = processAjaxResponseForMethodName;
    ajaxRequest.send(null);
}

function processAjaxResponseForMethodName(){
    if(ajaxRequest.readyState == 4) {  
           $('#submitPage').hide();

    }
}