Showing a 'Waiting ...' Message

M

Mel Smith

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 !
 
G

Gene Wirchenko

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 ??
Click to expand...

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 !
Click to expand...

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
 
M

Mel Smith

Gene:

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

-Mel Smith
 
G

Gene Wirchenko

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

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
 
G

Gene Wirchenko

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.
Click to expand...

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
 
M

Martin Pearman

     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
Click to expand...

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.
 
G

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.
Click to expand...

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
 
D

Dr J R Stockton

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.
Click to expand...

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.
 
G

Gene Wirchenko

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.
Click to expand...

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
 
E

Evertjan.

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.
Click to expand...

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"].
 
M

Mel Smith

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.
Click to expand...

Dr Stockton:

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

( Been golfing/partying lately :)) )

-Mel
 
G

Gene Wirchenko

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.
Click to expand...

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
 
T

Tony Mountifield

This still is not clear. What is direct script?
Click to expand...

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.
Click to expand...

As above, yes.
Other code blows up.
Click to expand...

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?
Click to expand...

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.
Click to expand...

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
 
E

Evertjan.

Gene Wirchenko wrote on 15 dec 2011 in comp.lang.javascript:
This still is not clear. What is direct script?
Click to expand...

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.
 
G

Gene Wirchenko

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.
Click to expand...

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.
Click to expand...

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.
Click to expand...

I thought that I was generating my page.
Hope this helps!
Click to expand...

Nope.

Sincerely,

Gene Wirchenko
 
T

Tony Mountifield

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.
Click to expand...

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
 
D

Dr J R Stockton

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.
Click to expand...


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

Mel Smith

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="#" >
&nbsp;&nbsp;Click to Loop : <input type="button" onclick="startloop();"
value="Start Timer" />
&nbsp;&nbsp;Loop Total : <input type="text" id="looptotal" value="0" />
<br />
<br />
&nbsp;Loop Message&nbsp;:&nbsp;<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>
 
G

Gene Wirchenko

[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.
Click to expand...

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!
Click to expand...

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
 
S

Scott Sauyet

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?
Click to expand...

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
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

I Need Help with making a function that draws in a canvas using location data. 1
Help with my responsive home page 2
How to show 'waiting...' mesage in page after submitting a web form 5
strange error 6
Javascript - sequence of events 4
Full script fails 5
Download the JAVA , .NET and SQL Server interview PDF 0
SQL Server and .NET Interview questions free download 0

Members online

Total: 76 (members: 2, guests: 74)
Robots: 481

Forum statistics

Threads
473,992
Messages
2,570,220
Members
46,807
Latest member
ryef

Latest Threads

Top