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.

Why not load the page and have the user trigger the action by clicking a button - which will send a request to your actual processing page via AJAX — JohnP, Jul 05 '11 at 07:45

score 3 · Answer 1 · answered Jul 05 '11 at 07:47

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.

score 2 · Answer 2 · answered Jul 05 '11 at 07:48

2

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.

answered Jul 05 '11 at 07:48

Niklas Wulff

3,497
2
22
43

1

This is workable but if you've output data to the page you won't be able to use `Response.Redirect()` afterwards, also you must ensure you call `Response.Flush()` before you start the long running processing otherwise the user still won't see anything. As you've written data to the page you will need to dump a ` ` plus a generic *if you are not redirected in X seconds please click here* type message to the end of the page once the database processing completes – RobV Jul 05 '11 at 08:20
@RobV I have actually tried this. But got an error msg in the end, `Response object error 'ASP 0156 : 80004005' Header Error The HTTP headers are already written to the client browser. Any HTTP header modifications must be made before writing page content. ` – woodykiddy Jul 05 '11 at 08:42
1

Yes you **cannot** call `Response.Redirect()` after you've written data to the page, you must use a `` redirect or other Javascript based method instead which is what I was trying to explain in my comment – RobV Jul 05 '11 at 08:45
I was not thinking about doing a Response.Redirect call, merely outputting the results - which of course should hide the load message – Niklas Wulff Jul 05 '11 at 08:51
@RobV I am using 'response.AddHeader "Refresh", "4;URL=" & URL' , not `Response.Redirect()`, but it's all the same anyway. How can we dynamically use ``? – woodykiddy Jul 05 '11 at 08:52
You have to create it with a `Response.Write()` because you can't output headers at this point e.g. `Response.Write("")` – RobV Jul 05 '11 at 10:20
@Niklas Yes just showing the results would be nicer but as the OP had stated his code redirects back to the original page when processing finishes I went with that – RobV Jul 05 '11 at 10:21

score 1 · Accepted Answer · answered Jul 05 '11 at 07:47

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

score 0 · Answer 4 · answered Jul 05 '11 at 15:09

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.

Display loading content/image while waiting

4 Answers4

Linked