Need help with screen update during event processing

B

Bob

Below is sample code that illustrates what I'm trying to do. For sake
of brevity I didn't include the properties of buildBtn that determine
what data to request.

The problem is I never see "Processing request" and depending on
server utilization the response can take several seconds to load
leading the users to wonder if the system is working. Unfortunately
getting rid of the users is not an option :) so any help I can get on
making this work is greatly appreciated.

TIA,
Bob



<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<script type="text/javascript">

// dynamically build button
function buildBtn(val){

function evt(){
results.innerHTML = '<h2>Processing request</h2>';

// Use for loop to simulate time it takes to
// get results page from server
for (var i=0; i<1500000; i++)
null;

// display results
results.innerHTML = "<h2>" + btn.value + " results</h2>";
}

var btn = document.createElement('input');
btn.type = "button";
btn.value = val;
btn.onclick = evt;
document.body.appendChild(btn);
}
</script>
</HEAD>

<BODY>
<script type="text/javascript">
var b1 = new buildBtn('button 1');
var b2 = new buildBtn('button 2');
</script>

<div id="results" />
</BODY>
</HTML>
 
M

McKirahan

Bob said:
Below is sample code that illustrates what I'm trying to do. For sake
of brevity I didn't include the properties of buildBtn that determine
what data to request.

The problem is I never see "Processing request" and depending on
server utilization the response can take several seconds to load
leading the users to wonder if the system is working. Unfortunately
getting rid of the users is not an option :) so any help I can get on
making this work is greatly appreciated.

TIA,
Bob



<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<script type="text/javascript">

// dynamically build button
function buildBtn(val){

function evt(){
results.innerHTML = '<h2>Processing request</h2>';

// Use for loop to simulate time it takes to
// get results page from server
for (var i=0; i<1500000; i++)
null;

// display results
results.innerHTML = "<h2>" + btn.value + " results</h2>";
}

var btn = document.createElement('input');
btn.type = "button";
btn.value = val;
btn.onclick = evt;
document.body.appendChild(btn);
}
</script>
</HEAD>

<BODY>
<script type="text/javascript">
var b1 = new buildBtn('button 1');
var b2 = new buildBtn('button 2');
</script>

<div id="results" />
</BODY>
</HTML>


I don't know why it doesn't work but you could use:
window.status = "Processing request"
instead then set it to blank afterwards.


It also didn't work when I tried toggling the visibility of an animated gif
such as:
http://www.itn.net/gif/style/ua/loading.gif
using this HTML:

<span id="loading" style="visibility:hidden">
<img src="http://www.itn.net/gif/style/ua/loading.gif" border="0"
alt="Processing request">
</span>

and this JavaScript:
loading.style.visibility = "visible";
and
loading.style.visibility = "hidden";
a the beggining and end of the "evt()" function.
 
D

DU

Bob said:
Below is sample code that illustrates what I'm trying to do. For sake
of brevity I didn't include the properties of buildBtn that determine
what data to request.

The problem is I never see "Processing request" and depending on
server utilization the response can take several seconds to load
leading the users to wonder if the system is working. Unfortunately
getting rid of the users is not an option :) so any help I can get on
making this work is greatly appreciated.

TIA,
Bob



<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<script type="text/javascript">

// dynamically build button
function buildBtn(val){

function evt(){
results.innerHTML = '<h2>Processing request</h2>';


Written like that, only MSIE will be able to support this.
document.getElementById("results").innerHTML = "<h2>Processing
request</h2>";
will work on most W3C DOM 2 compliant browsers.

The 2nd problem is that the buildBtn is called as the document loads and
results is not seen in the program. You can not make a call about an
object which does not already exists. Here, the referenced object
"results" does not exist at the point where the 2 buildBtn functions are
called.
This is a scope problem. Just by using defer or an init function on the
load event of the body, you can avoid all this.
// Use for loop to simulate time it takes to
// get results page from server
for (var i=0; i<1500000; i++)
null;

This looks very very weird to me. You're deliberately occupying the cpu
with a bogus, pointless loop. This abuses user's system resources. Just
imagine what this will cause to users having different system resources.
// display results
results.innerHTML = "<h2>" + btn.value + " results</h2>";

You're overwriting what was previously written. Is that intentional?

I personally would have used entirely compliant DOM methods to write
dynamically these results into the document and, of course, without the
weird and suspicious for loop.
}

var btn = document.createElement('input');
btn.type = "button";
btn.value = val;
btn.onclick = evt;

evt is often used as the event object generated by an event listener in
W3C DOM 2 events; that's why I would use another identifier than evt.

document.body.appendChild(btn);
}
</script>
</HEAD>

<BODY>
<script type="text/javascript">
var b1 = new buildBtn('button 1');
var b2 = new buildBtn('button 2');
</script>

<div id="results" />

I'm pretty sure you can not minimize the div like that. I would be very
surprised if you can do that without problems.
</BODY>
</HTML>

DU
 
B

Bob

DU said:
Written like that, only MSIE will be able to support this.
document.getElementById("results").innerHTML = "<h2>Processing
request</h2>";
will work on most W3C DOM 2 compliant browsers.

First off, thanks for taking the time to respond. This is an intranet
only page where the client configuration is restricted only to MSIE.
The 2nd problem is that the buildBtn is called as the document loads and
results is not seen in the program. You can not make a call about an
object which does not already exists. Here, the referenced object
"results" does not exist at the point where the 2 buildBtn functions are
called.
This is a scope problem. Just by using defer or an init function on the
load event of the body, you can avoid all this.

Two instances of buildBtn are instantiated when the form loads however
the contents of "results" are only modified as part of the onclick
event for each button so "results" does exist at the time it's
referenced.
This looks very very weird to me. You're deliberately occupying the cpu
with a bogus, pointless loop. This abuses user's system resources. Just
imagine what this will cause to users having different system resources.

The loop was only put in as a time delay to demonstrate the issue. The
actual page sends form information to the server and retrieves the
results.
You're overwriting what was previously written. Is that intentional?

I personally would have used entirely compliant DOM methods to write
dynamically these results into the document and, of course, without the
weird and suspicious for loop.

Yes, it is intentional, "results" is used to display dynamic data
based on user input
evt is often used as the event object generated by an event listener in
W3C DOM 2 events; that's why I would use another identifier than evt.

Thanks, I'll change it to something else.
I'm pretty sure you can not minimize the div like that. I would be very
surprised if you can do that without problems.

I haven't had any problems so far but I'll keep this in mind should I
encounter any weirdness.
 
B

Bob

McKirahan said:
I don't know why it doesn't work but you could use:
window.status = "Processing request"
instead then set it to blank afterwards.


It also didn't work when I tried toggling the visibility of an animated gif
such as:
http://www.itn.net/gif/style/ua/loading.gif
using this HTML:

<span id="loading" style="visibility:hidden">
<img src="http://www.itn.net/gif/style/ua/loading.gif" border="0"
alt="Processing request">
</span>

and this JavaScript:
loading.style.visibility = "visible";
and
loading.style.visibility = "hidden";
a the beggining and end of the "evt()" function.

Your response got me to thinking. I'm trying to update the screen in
the middle of handling an event which probably is the reason why it
doesn't work. What I really need to do is handle the event then
retrieve the info. So I tried splitting "evt" into two function and
using setTimeout to process the loadTbl function. The problem is I'm
not sure how to reference loadTbl.

If I move loadTbl outside of buildBtn it works but then I have other
issues to deal with so I'd rather not do that if I could avoid it. Any
ideas?

function evt(){
results.innerHTML = '<h2>Processing request</h2>';
setTimeout(loadTbl, 1); // This line produces an error
}

function loadTbl(){
// Use for loop to simulate time it takes to
// get results page from server
for (var i=0; i<1500000; i++)
null;

// display results
results.innerHTML = "<h2>" + btn.value + " results</h2>";
}
 

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

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top