Friendly wait message when creating a download file

Question

I call a web service that generates an Excel file, and when it runs, the user can upload the file. This file takes about 20 seconds. Is there a way to use jQuery to provide the user with some feedback that should wait a few seconds, except for the status bar. I prefer not to save or cache file servers.

I was hoping something like below would work, but obviously this is not

var myhref = "DownloadFile.ashx?foo=bar" $.get(myhref, function (data) { window.location = this.href; }, function (data) { alert("Could not generate file"); }); 

So I want to keep ui alive during boot creation

Answer 1

I would have a similar problem when I wanted to perform some actions with ajax that didn’t take so much time, but enough to make the user think “what is happening? Am I doing what I want?”.

I found a jQuery plugin called blockUI (really cool!) That display a message while processing your stuff.

And this is how I use it. First, the function that processes the request:

 function proceedToSend( requesterName, requesterId ) { //Here the wait/processing message is displayed $().ajaxStart($.blockUI({ message:$('#waitMessage')})); $.ajax({ type :"POST" , url : http://example.com/myurl.php dataType: yourDataType , data : myData , success :function ( response ) { //response processing if needed // Here the wait/processing messages is hidden $().ajaxStop($.unblockUI({ message:null })); } , error :function () { alert('there was an error processing the request!!'); $().ajaxStop($.unblockUI({ message:null })); } }); } 

And finally, you need to add this to your page so that the message displays:

 <div id="waitMessage" class="dataContainer" style="display: none;"> <p style="font-size: 30px;">Processing request...</p> </div> 

This hopefully helps!;)

Answer 2

This should work:

  <div id="waitMessage" style="display:none"> Please wait while the file is generated </div> <a href='DownloadFile.ashx?foo=bar' id='download'>Download me</a> <script type="text/javascript"> $(function () { $("#download").click(function () { $("#waitMessage").fadeIn() }); }); </script> 

Answer 3

 <input type="button" onclick="example_ajax_request()" value="Click Me!" /> <div id="example-placeholder"> <p>Placeholding text</p> </div> 

---

 function example_ajax_request() { $('#example-placeholder').html('<p><img src="/images/ajax-loader.gif" width="220" height="19" /></p>'); $('#example-placeholder').load("/examples/ajax-loaded.html"); }