471,863 Members | 954 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 471,863 software developers and data experts.

AJAX Loading Tab Doesn't Display

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="Javascript">
function showLoading () {
document.getElementById("loading_tab").style.displ ay = "";
}
function hideLoading () {
document.getElementById("loading_tab").style.displ ay = "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="hideLoading()">
<div style="background-color:#f00" id="loading_tab">loading...</div>

<form>
<input type=button value="Show Loading Tab" onclick="showLoading()">
<input type=button value="Hide Loading Tab" onclick="hideLoading()">
<input type=button value="Run AJAX Service" onclick="ajax()">
</form>

</body>
</html>

Sep 30 '05 #1
2 1949
ch****************@gmail.com wrote:
What seems to happen is that calls to change DOM object properties are
queued up, and then all executed simultaneously.


Some browsers, IE in particular, won't refresh the UI until a function
exits. So even though you're changing properties inside the function, these
are not shown until the whole function exits.

Instead, you need to look at setTimeout(). Run the first part to show the
tab, then use setTimeout() to run the second part in 10ms or something. The
first function will exit, and your changes will be shown. Then the second
will fire, etc.

--
Matt Kruse
http://www.JavascriptToolbox.com
http://www.AjaxToolbox.com
Sep 30 '05 #2
That fixes it. thanks.

Sep 30 '05 #3

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

10 posts views Thread by shankwheat | last post: by
17 posts views Thread by Arjen | last post: by
11 posts views Thread by =?Utf-8?B?R2VyaGFyZA==?= | last post: by
NeoPa
reply views Thread by NeoPa | last post: by
reply views Thread by YellowAndGreen | last post: by

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.