Hi all,
I have a page that calls a script to send an XML doc (using XML HTTP Request) with a systemid to a backend service page that uses the systemid in a query on the db, then retrieves data from a log table, and sends the data back in the XML response back to the client - where it is loaded dynamically into a table.
So, all well and good, works fine.
My problem is that there is no refresh of the window after the user has clicked 'LOad Data' and before the 'SendRequest' is run
Thing is, I have a nice 'Please Wait' div all set up and looking nice, but even though I call 'divPleaseWait.style.displ
ay = "block"' before the code to run the xml send, it still only displays AFTER the xml response has come back from the server.
Here is my code:
window.divPleaseWait.style
.display = "block";
// set up the screen, put the elements in the right places!
window.document.body.style
.cursor="w
ait";
window.status="importing..
.";
window.history.forward(1);
divPleaseWait.style.left = ((document.body.offsetWidt
h -
divPleaseWait.offsetWidth)
/ 2);
divPleaseWait.style.top = ((document.body.offsetHeig
ht -
divPleaseWait.offsetHeight
) / 2);
divFinished.style.left = ((document.body.offsetWidt
h -
divFinished.offsetWidth) / 3);
divFinished.style.top = ((document.body.offsetHeig
ht -
divFinished.offsetHeight) / 2);
var oFundsData, sFundsDataVal
// create a new XML Doc object
var oXML = new ActiveXObject("Microsoft.X
MLDOM");
// set props
oXML.async=false;
oXML.resolveExternals = false;
// create the root element
var oRoot=oXML.appendChild(oXM
L.createEl
ement("Req
uest"));
// set the attribute to determine which table to update
oRoot.setAttribute("system
", sSystem);
Isloaded = SendRequest(oXML)
if (Isloaded==true)
{
alert("Import successful");
}
else
{
alert("Import failed")
}
document.all("divPleaseWai
t").style.
display = "none";
document.all("divFinished"
).style.di
splay = "none";
window.document.body.style
.cursor="d
efault";
window.status="Ready";
}
}
<<< END CODE <<<<
Here is the <BODY> code with the divPleaseWait in it...
>>> CODE>>>
<BODY>
<table border="0" cellspacing=1 width="100%">
<tr>
<td width="100%">
<p style="MARGIN-LEFT: 0px; MARGIN-RIGHT: 0px" align="left"
><b><font color="#00309c" face="Tahoma" size="5">Import
</font></b><b><font color="#00309c" face="Tahoma" size="5">System Data</font></b></p></td>
</tr>
</table>
<hr color="#00309c" size="1">
<DIV ID = LoadBtns name = "LoadBtns" style= "DISPLAY: block">
<table id = tblBtns name = "tblBtns">
<tr>
<td>
<BUTTON id=btnLoadiFASTData name=btnLoadiFASTData ACCESSKEY="i" onclick='ShowBusy("iFAST")
'>Load <u>i</u>FAST Data</BUTTON>
</td>
<td>
<BUTTON id=btnLoadMCHData name=btnLoadMCHData ACCESSKEY="M" onclick='ShowBusy("MCH")'>
Load <u>M</u>CH Data</BUTTON>
</td>
</tr>
</table>
<DIV LANGUAGE=javascript id=divPleaseWait name = "divPleaseWait"
style="BORDER-RIGHT: buttonhighlight 2px outset; BORDER-TOP: buttonhighlight 2px outset; DISPLAY:
none; FONT-SIZE: 8pt; Z-INDEX: 4; FILTER: progid:DXImageTransform.Mi
crosoft.dr
opshadow(O
ffX
=2, OffY=2, Color='gray', Positive='true'); LEFT: 342px; BORDER-LEFT: buttonhighlight 2px outset;
WIDTH: 350px; CURSOR: default; BORDER-BOTTOM: buttonhighlight 2px outset; FONT-FAMILY: Tahoma; POSITION: absolute; TOP: 260px; BACKGROUND-COLOR: buttonface" align=center>
<DIV LANGUAGE=javascript onselectstart= "window.event.returnValue=
false;" style="PADDING-RIGHT: 3px; PADDING-LEFT: 3px; FONT-WEIGHT: bolder; PADDING-BOTTOM: 3px; CURSOR:
default; COLOR: captiontext; PADDING-TOP: 3px; BORDER-BOTTOM: white 2px
groove; BACKGROUND-COLOR: activecaption" id = divImportCaption name="divImportCaption">
Importing Selected Data
</DIV>
<DIV LANGUAGE=javascript onselectstart= "window.event.returnValue=
false;" style="PADDING-RIGHT: 5px; PADDING-LEFT: 5px; PADDING-BOTTOM: 5px; CURSOR: default; PADDING-TOP: 5px">
Please wait while the data is imported.
</DIV>
<DIV LANGUAGE=javascript onselectstart= "window.event.returnValue=
false;" style="PADDING-RIGHT: 5px; PADDING-LEFT: 5px; PADDING-BOTTOM: 5px; CURSOR: default; PADDING-TOP: 5px">
This may take several seconds.
</DIV>
<DIV LANGUAGE=javascript onselectstart= "window.event.returnValue=
false;" style="PADDING-RIGHT: 5px; PADDING-LEFT: 5px; PADDING-BOTTOM: 5px;
CURSOR: default; PADDING-TOP: 5px">
<marquee width="50%" bgcolor=white > Please be patient... </marquee>
</DIV>
</DIV>
<DIV style="DISPLAY: none" name="divResults" id="divResults">
<TABLE id = tblImpResults name = "tbtImpResults" width="100%" border=0 style="CURSOR: default; BORDER-BOTTOM: #6699ff 1px outset">
<font face="Tahoma" size="1">
<tr class="TableTitle" >
<TH noWrap Style = "BORDER-BOTTOM: #6699ff 1px outset" width="15%">LoadTime</TD>
<TH noWrap Style = "BORDER-BOTTOM: #6699ff 1px outset" width="40%">SourceFile</TD
>
<TH noWrap Style = "BORDER-BOTTOM: #6699ff 1px outset" width="20%">Comment</TD>
<TH noWrap Style = "BORDER-BOTTOM: #6699ff 1px outset" width="7%">Rows Read</TD>
<TH noWrap Style = "BORDER-BOTTOM: #6699ff 1px outset" width="8%">Rows Loaded</TD>
<TH noWrap Style = "BORDER-BOTTOM: #6699ff 1px outset" width="10%">Rows Archived</TD>
</tr></TR></TR></TR>
</TABLE>
</DIV>
</DIV></FONT>
</BODY>
<<< END CODE <<<
so, why does IE wait till the response comes back from the server before updating the page, even though I set the divPleaseWait style.display to "block" BEFORE any other code runs?
Even the cursor doesn't change till AFTER the function call has completed!
It's really strange, as the status bar text changes, but the divPleaseWaiy remains hidden, till after the results table has displayed.
thx for any help or tips
Philip
Start Free Trial