Friendly wait message while download file being generated

I am calling a webservice that generates a Excel file and when it's done the user can download the file. This file takes about 20 seconds to generate. Is there a way using jQuery for giving the user some feedback that thay have to wait a few seconds, other than the statusbar. I prefer not saving or caching the file serverside.

I was hoping something like below would work, but obviously it doesn't

   var myhref = "DownloadFile.ashx?foo=bar"
   $.get(myhref, function (data) {
            window.location = t开发者_Go百科his.href;
        },
        function (data) {
            alert("Could not generate file");

        });

So what i want is keep the ui alive while the download is being generated

---

I'd 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's going on?? Is it doing what I want??".

I found A jQuery plugin called blockUI (really cool!) that display's a message while you are processing your stuff.

And here is how I use it. First the function that process 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 have to add this on your page, so the message gets displayed:

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

That's it, hope it helps! ;)

---

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>

---

<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");
}