I would like have a little "loading... " tab not unlike the one that
gmail uses and I would like to display that tab while an ajax call is
made. The javascript to display the tab works. The javascript to hide
the tab works. But when I put the two together inside the function
that calls the ajax service, they don't work.
What seems to happen is that calls to change DOM object properties are
queued up, and then all executed simultaneously. That's what it looks
like anyway. Here is some example code:
<html>
<head>
<script language="Javas cript">
function showLoading () {
document.getEle mentById("loadi ng_tab").style. display = "";
}
function hideLoading () {
document.getEle mentById("loadi ng_tab").style. display = "none";
}
function ajax () {
// show the loading tab
showLoading ();
// do cool ajax stuff (actual ajax code snipped)
// (this code is just to waste some cpu cycles)
for (var I = 0; I < 100000; I++) var X = new Date();
// hide the loading tab
hideLoading ();
}
</script>
</head>
<body onload="hideLoa ding()">
<div style="backgrou nd-color:#f00" id="loading_tab ">loading.. .</div>
<form>
<input type=button value="Show Loading Tab" onclick="showLo ading()">
<input type=button value="Hide Loading Tab" onclick="hideLo ading()">
<input type=button value="Run AJAX Service" onclick="ajax() ">
</form>
</body>
</html>
gmail uses and I would like to display that tab while an ajax call is
made. The javascript to display the tab works. The javascript to hide
the tab works. But when I put the two together inside the function
that calls the ajax service, they don't work.
What seems to happen is that calls to change DOM object properties are
queued up, and then all executed simultaneously. That's what it looks
like anyway. Here is some example code:
<html>
<head>
<script language="Javas cript">
function showLoading () {
document.getEle mentById("loadi ng_tab").style. display = "";
}
function hideLoading () {
document.getEle mentById("loadi ng_tab").style. display = "none";
}
function ajax () {
// show the loading tab
showLoading ();
// do cool ajax stuff (actual ajax code snipped)
// (this code is just to waste some cpu cycles)
for (var I = 0; I < 100000; I++) var X = new Date();
// hide the loading tab
hideLoading ();
}
</script>
</head>
<body onload="hideLoa ding()">
<div style="backgrou nd-color:#f00" id="loading_tab ">loading.. .</div>
<form>
<input type=button value="Show Loading Tab" onclick="showLo ading()">
<input type=button value="Hide Loading Tab" onclick="hideLo ading()">
<input type=button value="Run AJAX Service" onclick="ajax() ">
</form>
</body>
</html>
Comment