Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations SkipVought on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Update span's innerText 2

Status
Not open for further replies.
NBartomeli

NBartomeli

Programmer
Jul 1, 2003
111
0
0
US
I am trying to update a status message before/after function calls. My code looks like the following (simplified)

Code: 
var status = document.getElementById('statusMessage');

function updateStatus(state){
    status.innerText = state;
}

function doThings(){

    updateStatus('doing something1');
    doSomething1();
    updateStatus('something1 done.  doing something2');
    doSomething2();
    updateStatus('Complete.');
}

...

<input type="button" onclick="doThings();">
<span id="statusMessage"></span>

Can someone give me some advise as to why the span only updated for the last call. after i click the button the routines run and the "complete" message is displayed, why aren't the intermediate messages being drawn as well?

Thanks in advance
 
Sort by date Sort by votes
It sounds like they might be, but the process is going so fast, you can't tell. Stick an alert message in there to stop the process and see if that helps.

If that doesn't appear to do it, I would try turning your calls to updateStatus(...) into timeout parameters:

Code: 
[red]setTimeout("[/red]updateStatus('doing something1'[red]);",0)[/red];

Dave

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
...east is east and west is west and if you take cranberries and stew them like applesauce
they taste much more like prunes than rhubarb does [infinity]
 
Upvote 0 Downvote
Have you tried putting the "updateStatus('doing something1');" function call inside of the function doSomething1()?

Programming today is a race between software engineers striving to build better and bigger idiot-proof programs, and the Universe trying to produce bigger and better idiots. So far, the Universe is winning. - Rick Cook
 
Upvote 0 Downvote
setTimeout(...) doesn't seem to work for me either. even if I set the timeout to some rediculously large number it makes the page almost "hang" for a few seconds then just shows the final message.



putting the status calls in the "doSomething()" routines doesn't seem to make it work either.

When i pop up an alert I am able to see the status change in the <span>, but I don't want to have to show an alert every time the status changes. is there some other way to force javascript to redraw certain elements on the page?
 
Upvote 0 Downvote
So are you certain that it's not just working so fast that you can't see it?

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
...east is east and west is west and if you take cranberries and stew them like applesauce
they taste much more like prunes than rhubarb does [infinity]
 
Upvote 0 Downvote
Positive.

If i put alerts, or something to break the routine, it works fine.

If i put something like "loop from 0 to 10000000" the button stays "pressed" untill all the loops have finished and then the last message is the only one that shows up.

I guess I'm just looking for a working example of a javascript-based status area/bar so I can keep the user updated of the somewhat long processing that needs to take place after the button is pressed.
 
Upvote 0 Downvote
Can you post a simple complete example of what you're doing so I could try it out myself?

Dave

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
...east is east and west is west and if you take cranberries and stew them like applesauce
they taste much more like prunes than rhubarb does [infinity]
 
Upvote 0 Downvote
My guess is that the screen doesn't refresh while the function is running (you run into that in VB sometimes). Have you tried moving the call to the sub funtions?

Programming today is a race between software engineers striving to build better and bigger idiot-proof programs, and the Universe trying to produce bigger and better idiots. So far, the Universe is winning. - Rick Cook
 
Upvote 0 Downvote
not the cleanest code in the world but it gets my point across (might be IE only for now)

Code: 
<html>
<head>

<script language="javascript">

function doSomething(){
	var i;
	for(i=0;i<800000;i++){
	}
}


function doProcess(){

	var status = document.getElementById('statusArea');

	status.innerHTML = 'Processing...';
	doSomething();

	status.innerHTML = 'more processing...';
	doSomething();

	status.innerHTML = 'STILL processing!';
	doSomething();

	status.innerHTML = 'DONE!';
}

</script>

</head>
<body>


<span id="statusArea"> Ready... </span><br>

<input type="submit" name="btnTest" value="Start Processing" id="btnTest" onclick="doProcess();" />



</body>
</html>
 
Upvote 0 Downvote
It's probably not much consolation, but if you can use the window.status bar (usually not recommended), you can do this:

Code: 
function doProcess(){

    var status = document.getElementById('statusArea');

    window.status = 'Processing...';
    doSomething();

    window.status = 'more processing...';
    doSomething();

    window.status = 'STILL processing!';
    doSomething();

    window.status = 'DONE!';
}

And that works for me in IE.

Still thinking about it though.

Dave

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
...east is east and west is west and if you take cranberries and stew them like applesauce
they taste much more like prunes than rhubarb does [infinity]
 
Upvote 0 Downvote
Got something!

Code: 
<html>
<head>

<script language="javascript">

function doSomething(){
    var i;
    for(i=0;i<800000;i++){
    }
}

function doSomething1(){
 statusArea.innerHTML = 'Processing...';
 setTimeout("doSomething();doSomething2();", 100);
}

function doSomething2(){
 statusArea.innerHTML = 'Still processing...';
 setTimeout("doSomething();doSomething3();", 100);
}

function doSomething3(){
 statusArea.innerHTML = 'STILL processing!...';
 setTimeout("doSomething();statusArea.innerHTML = 'Complete!'");
}


function doProcess(){
    doSomething1();
}
</script>

</head>
<body>


<span id="statusArea"> Ready... </span><br>

<input type="submit" name="btnTest" value="Start Processing" id="btnTest" onclick="setTimeout('doProcess();',0);" />



</body>
</html>

Whoopee!!!

Dave

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
...east is east and west is west and if you take cranberries and stew them like applesauce
they taste much more like prunes than rhubarb does [infinity]
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

RandyRiegel
  • Locked
  • Question
Update website via AJAX in realtime
Replies
6
Views
32
ChrisHirst
ChrisHirst
mptwoadmin
  • Locked
  • Question
Update link variables with onchange?
Replies
4
Views
48
ChrisHirst
ChrisHirst
twcman
  • Locked
  • Question
How to update 2 select boxes with same option using jquery mobile
Replies
2
Views
45
jpadie
jpadie
housedouble
  • Locked
  • Question
Ajax cache update
Replies
7
Views
42
jmeckley
jmeckley
dkemas
  • Locked
  • Question
update value of hidden field if other values set 1
Replies
9
Views
11
dkemas
dkemas

Part and Inventory Search

Sponsor

Back
Top