Need help with screen update during event processing

**McKirahan** · Jul 20 '05, 01:27 PM

Re: Need help with screen update during event processing

"Bob" <r.rectenwald@a ttbi.com> wrote in message
news:5f4ec306.0 401100835.69828 1d@posting.goog le.com...[color=blue]
> 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.innerHT ML = '<h2>Processin g 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.innerHT ML = "<h2>" + btn.value + " results</h2>";
> }
>
> var btn = document.create Element('input' );
> btn.type = "button";
> btn.value = val;
> btn.onclick = evt;
> document.body.a ppendChild(btn) ;
> }
> </script>
> </HEAD>
>
> <BODY>
> <script type="text/javascript">
> var b1 = new buildBtn('butto n 1');
> var b2 = new buildBtn('butto n 2');
> </script>
>
> <div id="results" />
> </BODY>
> </HTML>[/color]

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="visibili ty:hidden">
<img src="http://www.itn.net/gif/style/ua/loading.gif" border="0"
alt="Processing request">
</span>

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

DU · Jul 20 '05, 01:27 PM

Re: Need help with screen update during event processing

Bob wrote:
[color=blue]
> 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.innerHT ML = '<h2>Processin g request</h2>';[/color]

Written like that, only MSIE will be able to support this.
document.getEle mentById("resul ts").innerHTM L = "<h2>Proces sing
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.
[color=blue]
>
> // Use for loop to simulate time it takes to
> // get results page from server
> for (var i=0; i<1500000; i++)
> null;
>[/color]

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.
[color=blue]
> // display results
> results.innerHT ML = "<h2>" + btn.value + " results</h2>";[/color]

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.
[color=blue]
> }
>
> var btn = document.create Element('input' );
> btn.type = "button";
> btn.value = val;
> btn.onclick = evt;[/color]

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.

[color=blue]
> document.body.a ppendChild(btn) ;
> }
> </script>
> </HEAD>
>
> <BODY>
> <script type="text/javascript">
> var b1 = new buildBtn('butto n 1');
> var b2 = new buildBtn('butto n 2');
> </script>
>
> <div id="results" />[/color]

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

DU

**Bob** · Jul 20 '05, 01:28 PM

Re: Need help with screen update during event processing

DU <drunclear@hotR EMOVETHISmail.c om> wrote in message news:<btqqs6$89 c$1@news.eusc.i nter.net>...[color=blue]
> Bob wrote:
>[color=green]
> > 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.innerHT ML = '<h2>Processin g request</h2>';[/color]
>
>
> Written like that, only MSIE will be able to support this.
> document.getEle mentById("resul ts").innerHTM L = "<h2>Proces sing
> request</h2>";
> will work on most W3C DOM 2 compliant browsers.[/color]

First off, thanks for taking the time to respond. This is an intranet
only page where the client configuration is restricted only to MSIE.
[color=blue]
>
> 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.
>[/color]

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.
[color=blue][color=green]
> >
> > // Use for loop to simulate time it takes to
> > // get results page from server
> > for (var i=0; i<1500000; i++)
> > null;
> >[/color]
>
> 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.
>[/color]

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.
[color=blue][color=green]
> > // display results
> > results.innerHT ML = "<h2>" + btn.value + " results</h2>";[/color]
>
> 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.[/color]

Yes, it is intentional, "results" is used to display dynamic data
based on user input
[color=blue]
>[color=green]
> > }
> >
> > var btn = document.create Element('input' );
> > btn.type = "button";
> > btn.value = val;
> > btn.onclick = evt;[/color]
>
> 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.
>
>[/color]

Thanks, I'll change it to something else.
[color=blue][color=green]
> > document.body.a ppendChild(btn) ;
> > }
> > </script>
> > </HEAD>
> >
> > <BODY>
> > <script type="text/javascript">
> > var b1 = new buildBtn('butto n 1');
> > var b2 = new buildBtn('butto n 2');
> > </script>
> >
> > <div id="results" />[/color]
>
> I'm pretty sure you can not minimize the div like that. I would be very
> surprised if you can do that without problems.
>[/color]

I haven't had any problems so far but I'll keep this in mind should I
encounter any weirdness.
[color=blue][color=green]
> > </BODY>
> > </HTML>[/color]
>
> DU[/color]

**Bob** · Jul 20 '05, 01:28 PM

Re: Need help with screen update during event processing

"McKirahan" <News@McKirahan .com> wrote in message news:<7NXLb.164 96$xy6.42580@at tbi_s02>...[color=blue]
> "Bob" <r.rectenwald@a ttbi.com> wrote in message
> news:5f4ec306.0 401100835.69828 1d@posting.goog le.com...[color=green]
> > 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.innerHT ML = '<h2>Processin g 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.innerHT ML = "<h2>" + btn.value + " results</h2>";
> > }
> >
> > var btn = document.create Element('input' );
> > btn.type = "button";
> > btn.value = val;
> > btn.onclick = evt;
> > document.body.a ppendChild(btn) ;
> > }
> > </script>
> > </HEAD>
> >
> > <BODY>
> > <script type="text/javascript">
> > var b1 = new buildBtn('butto n 1');
> > var b2 = new buildBtn('butto n 2');
> > </script>
> >
> > <div id="results" />
> > </BODY>
> > </HTML>[/color]
>
>
> 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="visibili ty:hidden">
> <img src="http://www.itn.net/gif/style/ua/loading.gif" border="0"
> alt="Processing request">
> </span>
>
> and this JavaScript:
> loading.style.v isibility = "visible";
> and
> loading.style.v isibility = "hidden";
> a the beggining and end of the "evt()" function.[/color]

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.innerHT ML = '<h2>Processin g request</h2>';
setTimeout(load Tbl, 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.innerHT ML = "<h2>" + btn.value + " results</h2>";
}

Need help with screen update during event processing

Need help with screen update during event processing

Comment

Comment

Comment

Comment