Display loading content/image while waiting

Question

I have got an ASP page that does some back-end processing. It calls a stored procedure which will return a status value if the process is complete. The whole processing time can last around 10-30 seconds, depending on the amount of input data.

During this period of time, I guess it'd be much better to display a loading image or text than just a blank page. At least in this way the user knows the her request is being processed and just need to wait for it to finish.

I am not sure how we could implement this with classic ASP. Any ideas?

Thanks very much.

EDIT:

Well I guess there's something I didnt explain very clearly earlier. The actual scenario here is:

I have got 2 asp pages, A.asp and B.asp. User clicks a button on A.asp and it will submit form to B.asp, and B.asp is the processing page that will call the back-end stored procedure. When the B.asp is done with processing, it will redirect user to another page.

So the problem I have is, whenever user clicks the button of A.asp and gets to B.asp, there's just a blank page, even though I already had HTML code (displaying a loading image) placed at the very beginning of B.asp (the asp code that connects the database is way below). I don't know why it's not displaying image when it's loaded.

Answer 1

When you say displaying loading message, I interpret that you're using ajax. In ajax start you can display that image, and in ajax complete callback you can hide the loading image. Please provide some code examples if possible.

In case if jQuery ajax, you can use:

$('#loaderImage').show();
$.ajax({
    // Other ajax parameters
    success: function () {
       // hiding the image here
       $('#loaderImage').hide();
    }
});

Answer 2

Part of a solution which I've been using which should get you started --

CSS

#loading {
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    position: fixed;
    display: block;
    opacity: 0.7;
    background-color: #000;
    z-index: 99;
    text-align: center;
}

HTML

<div id="loading">
    <img id="loading-image" src="images/ajax-loader.gif" alt="Loading..." />
</div>

JavaScript

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script language="javascript" type="text/javascript">
    $(window).load(function() {
        $('#loading').hide();
    });
</script>

In my sample I used jQuery 1.4.4, but the latest should also work.

Answer 3

I would recommend looking into doing it with Ajax, as previously mentioned. Then you have more control of the flow and what the user sees.

But - if you really want to stick to classic ASP, one way would be to render a "loading page" message with Response.Write calls, and a Response.Flush call to output before the whole page is loaded.

Answer 4

I had a similar scenario; I tackled it by splitting up the work in to two parts, and placing all of the time consuming work in to a scheduled task (just a WSC File) that triggers every minute. I also could have created a service, but this worked just as well.

My ASP file created the initial records, effectively queueing up work to be done for the scheduled task to come along and do the heavy lifting. My scheduled task was also 'self aware'; if the last one was still running when the next one triggered, it just terminated itself and waited for the original to finish. This way there was no chance of duplicate processing.

The result was that the load on the server went down to nearly zero, even with hundreds of simultaneous requests, and that the end user got instant feedback telling them that they'd receive an email confirmation when their order was processed, along with a "confirmation" ID (the identity from the initial record creation) so there was a point of reference for everyone in case anything ever went wrong.