I have a legacy classic ASP page that is taking a long time to load. This is because before loading it must run a large number of database queries. Load time is upwards of 10 seconds.
The page structure looks like this:
<% SQL Queries %>
<html>...Display the data from the queries..</html>
ie, all the queries occur before the markup renders.
Due to the long load times I want to create a loading screen that will run before the queries start and close when the queries end, to provide an indication to the user. I'm wondering how to do this? The examples I've seen (such as BlockUI) rely on the page being called through ajax, but this particular page is being called using a standard 'a href'.
Thanks.
Classic ASP comes with the handy Response.Flush command. Such code will cause content to appear before the SQL queries start executing:
<%
Response.Write("<div id=""PleaseWaitPanel"">")
Response.Write("Processing, please wait...")
Response.Write("<img src=""please_wait.gif"" />")
Response.Write("</div>")
Response.Flush()
'SQL Queries...
%>
Now to hide it after queries are done you need simple jQuery:
<script type="text/javascript">
$(document).ready(function() {
$("#PleaseWaitPanel").hide();
});
</script>
the simplest way of doing this is showing the info (with javascript) when the onclick event of the tag is raised. when the page with the long lasting sqls is completely loaded this info is removed automatically because the new page is loaded and shown.
this only works when Response.buffer is true but that is the standard setting....
example:
<a href="longLoading.asp" onclick="showLoading()">click me to load the Long loading asp page</a>
I was facing the same problem and this worked for me:
default.asp (when it runs for the first time it doesn't return any records because the query has no parameter):
<% Dynamic SQL Query %>
<html>
<body>
Filter: <input type="text" id="filter">
<img src="images/search.png" onClick="search();"/>
<!-- when the search button is pressed the waiting.gif will appear -->
<img id="waiting" src="images/waiting.gif" hidden />
...table that shows the data from the query...
<script type="text/javascript" src="functions.js"></script>
</body>
</html>
functions.js:
function search() {
//this will hide the waiting.gif
document.getElementById("waiting").removeAttribute("hidden");
var_filter = document.getElementById("filter");
window.location.href = "default.asp?filter=" + var_filter.value;}
