Showing a 'Waiting ...' Message

Mel Smith · Dec 13, 2011

Hi:

Because of some great help from Denis McMahon last March, I've been
showing / sorting big tables with no problem

The only problem I have is displaying a 'Waiting for Sort to Complete
....' message on the screen during the interval that sorting is taking place.

The 'Wait' Message *does* display if I follow it with an Alert()
message. Otherwise, it does *not* display.

Is there some other way to *force* this following function to display ??

// **** here is the 'wait' message function ****
function showwaitmsg() {
var el = document.getElementById("sorttext")
el.style.color="white";
el.style.background="red" ;
el.value = " Sorting ... " ; // in IE7 and also Chrome, this doesn't
display UNLESS you show an alert() message first
return ;
}
// **** end of wait message function ****

Thanks for any hints provided !

Gene Wirchenko · Dec 13, 2011

Because of some great help from Denis McMahon last March, I've been
showing / sorting big tables with no problem

The only problem I have is displaying a 'Waiting for Sort to Complete
...' message on the screen during the interval that sorting is taking place.

The 'Wait' Message *does* display if I follow it with an Alert()
message. Otherwise, it does *not* display.

Is there some other way to *force* this following function to display ??

You are not the only one to do battle with this. I am another. I
found in my searching that many people had this problem. I do not
have a for-sure answer, but for what it is worth...

In my case, it was a tictactoe program. I was not always getting
the display updated with the final plays before the win/lose alert()
was displayed.

// **** here is the 'wait' message function ****
function showwaitmsg() {
var el = document.getElementById("sorttext")
el.style.color="white";
el.style.background="red" ;
el.value = " Sorting ... " ; // in IE7 and also Chrome, this doesn't
display UNLESS you show an alert() message first
return ;
}
// **** end of wait message function ****

Thanks for any hints provided !

In my case, I replaced the alert() with a setTimeout() to call
another function (consisting of the alert() I wanted) with a timeout
of 0 and then ended execution. It is important that execution end, or
the function specified in the setTimeout() will not execute.

I found that 0 worked just fine. I suspect that this allows the
screen update thread an opportunity to run.

In a related vein, I was trying to write something that would
show an update such as
1000 thingies somethingerised
2000 thingies somethingerised
3000 thingies somethingerised
I got something that worked reliably, but unfortunately, I threw out
my code. IIRC, my loop variable had to be global. I have tried to
recreate the code, but the following does not quite work. The
document.write() causes Looping() to become undefined! If I use an
alert() instead (which rather defeats the purpose), it works.

***** Start of Semi-Working Code *****
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
<title>trytimeout.html</title>

<script type="text/javascript">

var i;

function LoopStart()
{
alert("{LoopStart()");
i=1;
setTimeout("Looping()",0);
}

function Looping()
{
alert("{Looping @i="+i);
DoSomething();
if (i%3==0)
document.writeln(i+" thingies somethingerised<br>"); //*****
This causes trouble.
i++;
if (i<=10)
{
alert("@Looping() <setTimeout() @i="+i);
setTimeout("Looping()",0);
alert("@Looping() >setTimeout() @i="+i);
}
}

function DoSomething()
{
for (var i=1; i<=1000; i++)
;
}

</script>

</head>

<body>

<script type="text/javascript">
LoopStart();
</script>

</body>

</html>
***** End of Semi-Working Code *****

The above is a semi-educated guess, and I would welcome
correction if there is a reliable, cross-platform way to do it.

Sincerely,

Gene Wirchenko
2

Mel Smith · Dec 13, 2011

Gene:

Thanks for the code. I'll work on trying to implement it and let you
know.

-Mel Smith

Gene Wirchenko · Dec 14, 2011

Thanks for the code. I'll work on trying to implement it and let you
know.

I am going to take another whack at it. I had it working.
HONEST! REALLY! I thought I had the issue dealt with and so could
toss the code.

Sincerely,

Gene Wirchenko

Gene Wirchenko · Dec 14, 2011

I am going to take another whack at it. I had it working.
HONEST! REALLY! I thought I had the issue dealt with and so could
toss the code.

I think I originally had it working with console.log(). I got
the to work when I changed the document.writeln() to console.log().

Does anyone know why the document.writeln() causes Looping() to
become undefined?

Sincerely,

Gene Wirchenko

Martin Pearman · Dec 14, 2011

I think I originally had it working with console.log(). I got
the to work when I changed the document.writeln() to console.log().

Does anyone know why the document.writeln() causes Looping() to
become undefined?

Sincerely,

Gene Wirchenko

http://www.google.co.uk/search?q=ja...s=org.mozilla:en-GB:official&client=firefox-a

Typically any use of document.write() after the page has loaded will
replace the entire page content.

So your javascript is wiped out and Looping() is undefined.

Martin.

Gene Wirchenko · Dec 14, 2011

http://www.google.co.uk/search?q=ja...s=org.mozilla:en-GB:official&client=firefox-a

Typically any use of document.write() after the page has loaded will
replace the entire page content.

So your javascript is wiped out and Looping() is undefined.

I have a number of pages that do have document.write() calls in
them, and they work fine. The pages are presumably loaded at the time
the document.write() calls are made as some of those are in the body.
In one page, the body consists only of JavaScript code: a variable
creation and four document.write() calls using the variable and a
method defined in the head.

Could you please clarify your response?

Sincerely,

Gene Wirchenko

Dr J R Stockton · Dec 14, 2011

Tue said:
The only problem I have is displaying a 'Waiting for Sort to Complete
...' message on the screen during the interval that sorting is taking place.

Display the message as the last thing but one that gets executed. The
last thing is a setTimeout that calls the sort routine after some short
interval, say 100 ms. At the end of the sort, remove or alter the wait
message.

Gene Wirchenko · Dec 14, 2011

On 14.12.2011 19:46, Gene Wirchenko wrote:

In effect you are "overwriting" the old document with a new one, what
happens with the "script environment" associated with the old document
is anyone's guess, chrome for example guesses it should be kept around,
firefox doesn't.

But document.write doesn't always mean "overwrite", it can also mean
"insert" into what the browser is currently reading and from which it'll
build a document.

So how do I tell that the page has been loaded or that it is not
yet? That page with a JavaScript-only body ends scant bytes after,
and its document.write() calls do not clear the page.

Sincerely,

Gene Wirchenko

Evertjan. · Dec 14, 2011

Gene Wirchenko wrote on 14 dec 2011 in comp.lang.javascript:

So how do I tell that the page has been loaded or that it is not
yet? That page with a JavaScript-only body ends scant bytes after,
and its document.write() calls do not clear the page.

A page is loaded when all html and direct script is executed and before
body.onload starts executing.

All code that starts after that point and contains ..

document.write()

... executes an implicit ''

document.open()

... first,
thereby destroying the loaded document and starting a new document.

Such code starts by an event-listener, like:
onload='myfunction()';
onfocus='myfunction()';
onclick='myfunction()';
setTimeout('myfunction()',milisecs);
etc.

In short, you cannot document.write() into[!!] a page/document
that is ready [="loaded"].

Mel Smith · Dec 14, 2011

Dr. Stockton said:

Display the message as the last thing but one that gets executed. The
last thing is a setTimeout that calls the sort routine after some short
interval, say 100 ms. At the end of the sort, remove or alter the wait
message.

Dr Stockton:

Thank you for the suggestion above. I'll go back to work on it
tomorrow.

( Been golfing/partying lately

) )

-Mel

Gene Wirchenko · Dec 15, 2011

Gene Wirchenko wrote on 14 dec 2011 in comp.lang.javascript:

A page is loaded when all html and direct script is executed and before
body.onload starts executing.

This still is not clear. What is direct script?

I have code that works fine and has document.write() calls in the
body. Other code blows up.

At what point does JavaScript get executed?

Nothing I have read (including the standard) covers this at all
or very well. I have been unable to find any explanation such that,
suing it, I could then look at some code and determine whether it
would wipe out my page or not.

If you have a URL, I will happily read that.

[snip]

Sincerely,

Gene Wirchenko

Tony Mountifield · Dec 15, 2011

This still is not clear. What is direct script?

Code that is executed at the time the page is being built, e.g.

<body>
<h1>Test page</h1>
<p>This comes before the hello world.</p>
<script type="text/javascript">
document.write("<p>Hello, world!</p>\n");
setTimeout(function() {document.write("Completely new page\n");}, 5000);
</script>
<p>This comes after the hello world.</p>

I have code that works fine and has document.write() calls in the
body.

As above, yes.

Other code blows up.

If it gets invoked after the page has finished, by being called by an event
or a timeout.

At what point does JavaScript get executed?

As it gets encountered. But for any code executed from an event, after the page
has loaded, the document.write calls will replace the page.
In the above example, the function within setTimeout() gets defined as
the page is built, but EXECUTED later.

Nothing I have read (including the standard) covers this at all
or very well. I have been unable to find any explanation such that,
suing it, I could then look at some code and determine whether it
would wipe out my page or not.

If you have a URL, I will happily read that.

If you want to update parts of your page after it has loaded, then you
don't want document.write(). Instead, you have to manipulate the DOM, by
having empty divs with ids in your document, and then at run time get a
reference to them and either write to their innerHTML property, or attach
new DOM elements to them.

Hope this helps!

Tony

Evertjan. · Dec 15, 2011

Gene Wirchenko wrote on 15 dec 2011 in comp.lang.javascript:

This still is not clear. What is direct script?

Direct/immediate script execution
= execution before the page is fully loaded.

"loaded" means built. Listener "onload" should have been called "onloaded".

Perhaps some experimenting experience will do better than explaining.

You are skipping what I wrote about code that is only executed by
a trigger from a event-listener or timeout execution. And that is just the
crux.

Gene Wirchenko · Dec 15, 2011

Code that is executed at the time the page is being built, e.g.

<body>
<h1>Test page</h1>
<p>This comes before the hello world.</p>
<script type="text/javascript">
document.write("<p>Hello, world!</p>\n");
setTimeout(function() {document.write("Completely new page\n");}, 5000);
</script>
<p>This comes after the hello world.</p>

As above, yes.

If it gets invoked after the page has finished, by being called by an event
or a timeout.

But it is not. It gets invoked in the body. Here is the code
again:

***** Start of Semi-Working Code *****
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
<title>trytimeout.html</title>

<script type="text/javascript">

var i;

function LoopStart()
{
alert("{LoopStart()");
i=1;
setTimeout("Looping()",0);
}

function Looping()
{
alert("{Looping @i="+i);
DoSomething();
if (i%3==0)
document.writeln(i+" thingies somethingerised<br>"); //*****
This causes trouble.
i++;
if (i<=10)
{
alert("@Looping() <setTimeout() @i="+i);
setTimeout("Looping()",0);
alert("@Looping() >setTimeout() @i="+i);
}
}

function DoSomething()
{
for (var i=1; i<=1000; i++)
;
}

</script>

</head>

<body>

<script type="text/javascript">
LoopStart();
</script>

</body>

</html>
***** End of Semi-Working Code *****

So why does the loop not work? IIUC, the LoopStart() call is
executed as it is encountered, and the loop should work. It blows up.

As it gets encountered. But for any code executed from an event, after the page
has loaded, the document.write calls will replace the page.
In the above example, the function within setTimeout() gets defined as
the page is built, but EXECUTED later.

While the page is still getting set up. So why is it then lost?

If you want to update parts of your page after it has loaded, then you
don't want document.write(). Instead, you have to manipulate the DOM, by
having empty divs with ids in your document, and then at run time get a
reference to them and either write to their innerHTML property, or attach
new DOM elements to them.

I thought that I was generating my page.

Hope this helps!

Nope.

Sincerely,

Gene Wirchenko

Tony Mountifield · Dec 15, 2011

But it is not. It gets invoked in the body. Here is the code
again:

***** Start of Semi-Working Code *****
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
<title>trytimeout.html</title>

<script type="text/javascript">

var i;

function LoopStart()
{
alert("{LoopStart()");
i=1;
setTimeout("Looping()",0);
}

function Looping()
{
alert("{Looping @i="+i);
DoSomething();
if (i%3==0)
document.writeln(i+" thingies somethingerised<br>"); //*****
This causes trouble.
i++;
if (i<=10)
{
alert("@Looping() <setTimeout() @i="+i);
setTimeout("Looping()",0);
alert("@Looping() >setTimeout() @i="+i);
}
}

function DoSomething()
{
for (var i=1; i<=1000; i++)
;
}

</script>

</head>

<body>

<script type="text/javascript">
LoopStart();
</script>

</body>

</html>
***** End of Semi-Working Code *****

So why does the loop not work? IIUC, the LoopStart() call is
executed as it is encountered, and the loop should work. It blows up.

The functions get defined in the HEAD before the page is rendered.
OK so far.

The call to LoopStart() happens while the page is being built.
LoopStart() executes at that time. If LoopStart() contained a
document.write(), the output of that would appear within the page.

One of the things that LoopStart() does is to queue a call to Looping()
to be executed at some time in the future, but at least 0ms later.
A setTimeout() with timeout of zero does NOT execute the function
argument there and then.

LoopStart() returns and the page finishes rendering.

Once the page has *finished rendering*, the queued call to Looping()
is then executed. It includes a document.write() which replaces the
displayed page that had already been completed.

The rule is not to use document.write() in ANY function that is
reached via a setTimeout(), setInterval() or an onxxxx event handler.
Only in code that is actually executed (not just defined) while the
page is being built.

Hope this is clearer!

Tony

Dr J R Stockton · Dec 15, 2011

Wed said:
On 14.12.2011 19:46, Gene Wirchenko wrote:

In effect you are "overwriting" the old document with a new one, what
happens with the "script environment" associated with the old document
is anyone's guess, chrome for example guesses it should be kept around,
firefox doesn't.

But document.write doesn't always mean "overwrite", it can also mean
"insert" into what the browser is currently reading and from which
it'll build a document.

It never inserts. It appends to as much of the DOM representation has
already been constructed, and that which is constructed later follows
it.

Mel Smith · Dec 15, 2011

Dr John Stockton and Gene Wirchenko:

Following the instructions of Dr. John, I build this little 'looperr'
below that shows my warning message finally

(

Hope this helps others.

-Mel Smith

*************************

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>loopmsg.htm</title>

<script type="text/javascript">

var nCrud = 0

function LooperSorter() {

var el = document.getElementById("looptotal") ;
el.value = nCrud.toString() ; // clear out the total field

var mypi = 3.1415926 ;

// You may wish to make a significantly more complex loop so that
// the 'Looping' Message can be seen easier

for (var i=0; i <= 3000000; i++) {
nCrud = (i / mypi) + 1234.567;
}

// Now at end of Loop, So, prove it by placing the
// nCrud vrbl total in the looptotal field
var el = document.getElementById("looptotal") ;
el.value = nCrud.toString() ;

// Now, Restore the original message
var el = document.getElementById("looptext") ;
el.style.color = "yellow" ;
el.style.background = "gray" ;
el.value = "Ready to Loop"
}

function showwaitmsg() {
var el = document.getElementById("looptext") ;
el.style.color="white";
el.style.background="red" ;
el.value = " Looping ... " ;
return ;
}

function startloop() {

// First, show the 'Looping ... ' Message
showwaitmsg() ; // shows the message White on Red background

// Then, wait 1/20th of a second to give the 'wait' message
// some time to display.
// At the end of the 'LooperSorter' Code, the original message
// is restored to the message field.

// You may also wish to set the delay to 0 millisecs to test it.
setTimeout("LooperSorter()",200) ; // wait .20 secs, then restore message

// You cannot place the message restoration code *here* because the
// message will be restored *before* the 'looper' even runs !
}
</script>

</head>

<body>
<form action="#" >
  Click to Loop : <input type="button" onclick="startloop();"
value="Start Timer" />
  Loop Total : <input type="text" id="looptotal" value="0" />
<br />
<br />
 Loop Message : <input type="text" readonly="readonly"
id="looptext"
style="width:12em;font-weight:bold;color:yellow;background:gray;text-align:center;" value="Ready to Loop" /></form></body></html>

Gene Wirchenko · Dec 15, 2011

[snip]

The functions get defined in the HEAD before the page is rendered.
OK so far.

The call to LoopStart() happens while the page is being built.
LoopStart() executes at that time. If LoopStart() contained a
document.write(), the output of that would appear within the page.
Confirmed.

One of the things that LoopStart() does is to queue a call to Looping()
to be executed at some time in the future, but at least 0ms later.
A setTimeout() with timeout of zero does NOT execute the function
argument there and then.

LoopStart() returns and the page finishes rendering.

Once the page has *finished rendering*, the queued call to Looping()
is then executed. It includes a document.write() which replaces the
displayed page that had already been completed.

Got it.

The rule is not to use document.write() in ANY function that is
reached via a setTimeout(), setInterval() or an onxxxx event handler.
Only in code that is actually executed (not just defined) while the
page is being built.

Hope this is clearer!

Yup! That did it. Thank you very much.

Now, why do I not find this sort of stuff written up in any books
or Website that I read? I only find out because of running into the
problems. Not the most efficient way of going about things, is it?

Sincerely,

Gene Wirchenko

Scott Sauyet · Dec 16, 2011

Gene said:
Yup! That did it. Thank you very much.

Now, why do I not find this sort of stuff written up in any books
or Website that I read? I only find out because of running into the
problems. Not the most efficient way of going about things, is it?

It's not clear to me why, but the overall quality of Javascript books
seems significantly lower than the quality on many other programming
topics. For a long time I would only recommend Flanagan's,
_Javascript: The Definitive Guide_ and (with some significant
caveats), Crockford's _Javascript: The Good Parts_. These days, I'd
also include, again with caveats, Stefanov's _Javascript Pattern_ and
Zakas' _High Performance Javascript_. I've heard really good things
about Haverbeke _Eloquent Javascript_ as a beginner's book, but I
haven't really been through it.

As to websites, there is plenty of good stuff out there. But there is
much, much more that is pure nonsense, or, worse, only pseudo-
sensible. Anyone who has made something `work` on a webpage with JS
seems to think that immediately qualifies them as an expert, and they
publish much rubbish.

The best way to learn this stuff is to continually experiment, post in
groups like this one and jsmentors, read one or two of the books
above, and most of all, just keep trying. If you want other online
resources, the `blogs` section of Rey Bango's post lists many good
resources: <http://blog.reybango.com/2010/12/15/what-to-read-to-get-
up-to-speed-in-javascript/>

Good luck,

-- Scott

I Need Help with making a function that draws in a canvas using location data.	1	Dec 17, 2021
Help with my responsive home page	2	Dec 14, 2022
How to show 'waiting...' mesage in page after submitting a web form	5	Oct 26, 2005
strange error	6	Oct 30, 2004
Javascript - sequence of events	4	Jun 4, 2006
Full script fails	5	Feb 15, 2008
Download the JAVA , .NET and SQL Server interview PDF	0	Sep 17, 2006
SQL Server and .NET Interview questions free download	0	Oct 28, 2006

Showing a 'Waiting ...' Message

Mel Smith

Gene Wirchenko

Mel Smith

Gene Wirchenko

Gene Wirchenko

Martin Pearman

Gene Wirchenko

Dr J R Stockton

Gene Wirchenko

Evertjan.

Mel Smith

Gene Wirchenko

Tony Mountifield

Evertjan.

Gene Wirchenko

Tony Mountifield

Dr J R Stockton

Mel Smith

Gene Wirchenko

Scott Sauyet

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads