By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
449,247 Members | 1,250 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 449,247 IT Pros & Developers. It's quick & easy.

Need help with screen update during event processing

P: n/a
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>
Jul 20 '05 #1
Share this Question
Share on Google+
4 Replies


P: n/a
"Bob" <r.**********@attbi.com> wrote in message
news:5f*************************@posting.google.co m...
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.
Jul 20 '05 #2

P: n/a
DU
Bob wrote:
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
Jul 20 '05 #3

P: n/a
Bob
DU <dr*******@hotREMOVETHISmail.com> wrote in message news:<bt**********@news.eusc.inter.net>...
Bob wrote:
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.


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.

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


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


Yes, it is intentional, "results" is used to display dynamic data
based on user input
}

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.


Thanks, I'll change it to something else.
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.


I haven't had any problems so far but I'll keep this in mind should I
encounter any weirdness.
</BODY>
</HTML>


DU

Jul 20 '05 #4

P: n/a
Bob
"McKirahan" <Ne**@McKirahan.com> wrote in message news:<7NXLb.16496$xy6.42580@attbi_s02>...
"Bob" <r.**********@attbi.com> wrote in message
news:5f*************************@posting.google.co m...
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.


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>";
}
Jul 20 '05 #5

This discussion thread is closed

Replies have been disabled for this discussion.