I've been trying to figure out this problem for two days now. Any help would be GREATLY appreciated!

I have a function that has a long processing time; the process can take up to about five seconds. The process involves retrieving data from the server (via AJAX) and then updating a treeview with the data. It is a huge database and a complex query, so sometimes the data retrieval can take a few seconds.

The problem I have is that, once a checkbox is clicked on the treeview, the user has no idea that anything is happening and often will try to click it again before the process is completed, so I would like to have a "Please wait" notification appear on the screen when the function begins and remain on the screen until the function is complete.

What I have done is create a hidden DIV containing some notification text that I make appear at the beginning of the function and then I hide at the end of the function. Pretty simple stuff.

The problem is that the notification only appears at the very end of the function. So, basically, nothing happens at all until the function is complete and then the notification flashes for a split second and disappears.

However, if I have an alert appear, the notification does appear immediately. Based on what I've learned in the discussion groups, this is happening because the screen gets refreshed (not reloaded) when an alert occurs. Is there a way to get the screen to refresh without an alert? Or am I barking up the wrong tree?

I've tried using the "setTimeout" and "setInterval" functions but it doesn't fix the problem. I've tried "window.blur(); window.focus()" but it didn't work. I've also tried changing the cursor style for the treeview during this waiting period, but I still have the same problem: the cursor doesn't change until after the function is complete, so it just flashes as a "wait" cursor for a split second and then returns to the default cursor immediately.

Here's my code:

function test() {
showHourglass();
//do stuff here.....
hideHourglass();
}

function showHourglass() {
var hourglass = top.fraBody.Hourglass;
hourglass.style.display = 'block';
hourglass.style.left = top.fraBody.document.body.scrollLeft + (top.fraBody.document.body.clientWidth - hourglass.clientWidth) / 2;
hourglass.style.top = top.fraBody.document.body.scrollTop + (top.fraBody.document.body.clientHeight - hourglass.clientHeight) / 2;
}
function hideHourglass() {
var hourglass = top.fraBody.Hourglass;
hourglass.style.display = 'none';
hourglass.style.left = top.fraBody.document.body.scrollLeft + (top.fraBody.document.body.clientWidth - hourglass.clientWidth) / 2;
hourglass.style.top = top.fraBody.document.body.scrollTop + (top.fraBody.document.body.clientHeight - hourglass.clientHeight) / 2;
}


And here's the hidden DIV:

<div class="Hourglass" id="Hourglass" style="DISPLAY: none">
<div id="HourglassText" class="LabelNormal">Please wait...</div>
</div>