mattle
08-28-2009, 09:02 AM
Hello all,
I'm working on a site that has a lot of reporting. I've got a template in place that basically does the following:
-execute a long, complicated query
-write the data into a spreadsheet structure using PHPExcel
-output the spreadsheet to the browser as CSV, XLS or using the PHPExcel HTML-rendering library depending on the arguments given.
Some of these reports take more than a few seconds to run through this whole process. I've also got some form controls on the page that will re-execute the process via AJAX (ie, setting search or sorting parameters..)
Part of the problem I'm having is that some of the form controls fire Javascript events that aren't necessarily valid until the page has fully loaded. One example is a little popup DHTML calendar that shows up when you click in a date field. The calendar is initialized in the body.onload() function, so if you click in the form control before the page is entirely loaded, it kind of blows up.
As a solution, I've created a "loading" div that sits in a layer on top of the page and occupies the page height and width. It effectively captures all mouse actions while the page is loading. Then, in body.onload(), I disable that div, returning control of the page to the user. Working great in all situations...except for one.
In IE (I'm using v7), when you go to a quick-loading page, it works fine, but on a longer loading page, the body.onload() handler never executes--BUT only when you arrive at the page via a hyperlink. If you reload the page, it executes fine. Of course, the result of this is that my "loading" div never gets hidden and the user can't get control of the page. I added an alert statement that confirmed this behavior:
Fast page via link : ok
Fast page via reload : ok
Slow page via link : bad
Slow page via reload : ok
Again, this is only in IE...works fine in other browsers.
Here's the relevant code:
Loading div, and accompanying CSS:
<div id="loading">
<table height=100% width=100%>
<tr>
<td align="center"><span>LOADING <img src="/images/loading.gif" alt="loading"></img></span></td>
</tr>
</table>
</div>
#loading {
position: absolute;
height: 100%;
width: 100%;
margin: 0px 0px 0px 0px;
top: 0px;
left: 0px;
text-align: center;
}
#loading span {
background:#eeeeff;
color: #333366;
font-size: 24pt;
font-weight: bold;
border-style: solid;
border-width: 1px;
border-color: #999999;
line-height: 32px;
padding: 25px 50px;
position: relative;
}
Body tag and accompanying javascript (<script> is in the document <head>)
<script language="Javascript" type="text/javascript">
function load()
{
alert("Executing onLoad");
startCal('calDiv', 'n/j/Y');
var loading = document.getElementById('loading');
if (loading)
{
loading.style.visibility='hidden';
// just in case
loading.onclick=function () { loading.style.visibility='hidden'; }
}
}
</script>
<body onLoad="load();">
I'm working on a site that has a lot of reporting. I've got a template in place that basically does the following:
-execute a long, complicated query
-write the data into a spreadsheet structure using PHPExcel
-output the spreadsheet to the browser as CSV, XLS or using the PHPExcel HTML-rendering library depending on the arguments given.
Some of these reports take more than a few seconds to run through this whole process. I've also got some form controls on the page that will re-execute the process via AJAX (ie, setting search or sorting parameters..)
Part of the problem I'm having is that some of the form controls fire Javascript events that aren't necessarily valid until the page has fully loaded. One example is a little popup DHTML calendar that shows up when you click in a date field. The calendar is initialized in the body.onload() function, so if you click in the form control before the page is entirely loaded, it kind of blows up.
As a solution, I've created a "loading" div that sits in a layer on top of the page and occupies the page height and width. It effectively captures all mouse actions while the page is loading. Then, in body.onload(), I disable that div, returning control of the page to the user. Working great in all situations...except for one.
In IE (I'm using v7), when you go to a quick-loading page, it works fine, but on a longer loading page, the body.onload() handler never executes--BUT only when you arrive at the page via a hyperlink. If you reload the page, it executes fine. Of course, the result of this is that my "loading" div never gets hidden and the user can't get control of the page. I added an alert statement that confirmed this behavior:
Fast page via link : ok
Fast page via reload : ok
Slow page via link : bad
Slow page via reload : ok
Again, this is only in IE...works fine in other browsers.
Here's the relevant code:
Loading div, and accompanying CSS:
<div id="loading">
<table height=100% width=100%>
<tr>
<td align="center"><span>LOADING <img src="/images/loading.gif" alt="loading"></img></span></td>
</tr>
</table>
</div>
#loading {
position: absolute;
height: 100%;
width: 100%;
margin: 0px 0px 0px 0px;
top: 0px;
left: 0px;
text-align: center;
}
#loading span {
background:#eeeeff;
color: #333366;
font-size: 24pt;
font-weight: bold;
border-style: solid;
border-width: 1px;
border-color: #999999;
line-height: 32px;
padding: 25px 50px;
position: relative;
}
Body tag and accompanying javascript (<script> is in the document <head>)
<script language="Javascript" type="text/javascript">
function load()
{
alert("Executing onLoad");
startCal('calDiv', 'n/j/Y');
var loading = document.getElementById('loading');
if (loading)
{
loading.style.visibility='hidden';
// just in case
loading.onclick=function () { loading.style.visibility='hidden'; }
}
}
</script>
<body onLoad="load();">