How can I implement showing "Generating data... please wait" information to a web browser from a web application (if data is not cached it can take some time to generate response), with and without JavaScript (AJAX)?
I am interested both in solution using AJAX (where I can replace loading message using JavaScript), and in solution using only server process, without JavaScript (if possible).
I'd like to replace loading message with response as soon as it is available.
JqueryUI's Tabs plugin has this built in, you could easily tie into their plugin to do what you want without having to write it yourself.
You would need to use JavaScript to accomplish this without reloading the page. Here's a sample of using jQuery to create this type of effect.
http://trevordavis.net/blog/tutorial/ajax-forms-with-jquery/
The only way you could do this from the server side would be to show the message on the page you're POSTing to and write to the screen using a buffered output before you do the actual processing.
Without script: You could redirect to an intermediate web page with a "please wait" message that redirects to the result page when the process is complete.
With script: Your page could have a hidden div that shows up with a "please wait" message. That div could also be as big as your page and transparent (with the message in a smaller div) so that your users cannot click on the page while the message is displayed.
Here's what I would do:
Here's what I would do in implementing this client side.
This would be quite easy to accomplish using an Ajax call. Set a div on your page to show the "Generating... please wait" message when you first make the Ajax call. (A simple unimaginative animated graphic would suffice to queue the user's expectation of a pending operation. Convention = understanding = good interface.) Then pass a function into the readystatechange handler that updates the div with the message/progress graphic once the Ajax request returns.
function ShowPendingOperation(){
var resultHolder = document.getElementById( 'statusDiv' );
resultHolder.innerHTML = "Your data is loading... <img src='yourProgressAnim.gif'>";
var request = GXmlHttp.create();
request.open("post", "/yourScript", true);
request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
request.onreadystatechange = function() {
if (request.readyState == 4) {
resultHolder.innerHTML = "operation complete";
resultHolder.innerHTML += "result1";
resultHolder.innerHTML += "result2";
resultHolder.innerHTML += "etc";
}
}
request.send( 'field1=data1&field2=data2' );
}
Note the snippet above is drawn from sample code written for a Google Map site, presumably your line creating the XMLHttpRequest object will vary...
One of the trick I have found is to use <meta http-equiv="refresh" content="0" /> to redirect to ready view... but not closing html tag and not closing connection till the final response is ready:
print <<'EOF';
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="refresh" content="0"/>
<title>$title</title>
</head>
<body>
EOF
print "Generating...";
while (!is_ready()) {
print ".";
wait();
}
print <<EOF;
</body>
</html>
EOF
Is that something that has the chance of working, or does it work only by accident?