Friendly wait message while download file being generated

Question

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 = this.href;
        },
        function (data) {
            alert("Could not generate file");

        });

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

Answer 1

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! ;)