How to update a label using Javascript?

[gnewsgroup]

In my asp.net 2.0 web application, I would like to display the process
progress information in the browser. The progress info is displayed
one after another with 1 or 2 seconds delay in between them. I
believe you guys have seen this a lot in a DOS console.

I have been trying this in my code-behind in C# for a few days with no
luck.

I think this must be achievable through javascript. But, I am new to
javascript, could you guys give me a hint on how to do this in
javascript? Thanks.

 

[My Pet Programmer]

gnewsgroup said:

In my asp.net 2.0 web application, I would like to display the process
progress information in the browser. The progress info is displayed
one after another with 1 or 2 seconds delay in between them. I
believe you guys have seen this a lot in a DOS console.

I have been trying this in my code-behind in C# for a few days with no
luck.

I think this must be achievable through javascript. But, I am new to
javascript, could you guys give me a hint on how to do this in
javascript? Thanks.

Where is the information displayed now? You could write the status
message to a file on each poll and pick it up via a simple tag in the
html, like:

<img id="dataImg" src="pageyouwroteto" style="visibility:hidden">, and
then use javascript to display it every second with:

<script type="text/javascript">
function updateStatus() {
document.getElementById("dataImg").src = "pageyouwroteto" +
new Date().getTimeMillis();
}
window.setInterval(updateStatus, 1000);
</script>

Randy might have a better way, from some of the stuff I've seen him post.

~A!

 

[My Pet Programmer]

My Pet Programmer said:

gnewsgroup said:

Where is the information displayed now? You could write the status
message to a file on each poll and pick it up via a simple tag in the
html, like:

<img id="dataImg" src="pageyouwroteto" style="visibility:hidden">, and
then use javascript to display it every second with:

<script type="text/javascript">
function updateStatus() {
document.getElementById("dataImg").src = "pageyouwroteto" +
new Date().getTimeMillis();
}
window.setInterval(updateStatus, 1000);
</script>

I forgot to put in how you display it after you get it, I'm sorry about
that.

Here you might have a label on the page, and you could display the
status you got by modifying the function with:

document.getElementById('labelid').innerHTML =
document.getElementById("dataImg");

~A!

 

[David Mark]

gnewsgroup said:




Where is the information displayed now? You could write the status
message to a file on each poll and pick it up via a simple tag in the
html, like:

<img id="dataImg" src="pageyouwroteto" style="visibility:hidden">, and
then use javascript to display it every second with:

<script type="text/javascript">
   function updateStatus() {
     document.getElementById("dataImg").src = "pageyouwroteto" +
       new Date().getTimeMillis();

Why getTimeMillis?

   }
   window.setInterval(updateStatus, 1000);

As written, there is no way to stop this interval.

</script>

You are updating the src of a hidden image forever. What is the point
of that?

 

[David Mark]

My Pet Programmer said:









I forgot to put in how you display it after you get it, I'm sorry about
that.

Here you might have a label on the page, and you could display the
status you got by modifying the function with:

More likely a div than a label. But a label is what the OP seems to
prefer.

document.getElementById('labelid').innerHTML =
document.getElementById("dataImg");

You are setting a string property to an element object. (?)

It seems your solution needs a little more work (and explanation.)

I am not sure what the OP wants, but this can't be it.

 

[My Pet Programmer]

David Mark said:

As written, there is no way to stop this interval.

You're right, I didn't put a stop in. He should only have it run during
the update and then stop. Excellent point, I should have paid better
attention to detail.

Why getTimeMillis?

Is there a performance hit, or just a curiosity. It makes it clearer
what I'm doing in the code, I think. If it's inefficient, let me know
and I'll just comment better.

Ok, so an updated code listing then:

<script type="text/javascript">

function StatusUpdater(inID, outID) {
this.inElm = document.getElementById(inID);
this.outElm = document.getElementById(outID);
this._interval;

}

StatusUpdater.prototype.start =
function() {
this._interval = window.setInterval(this.update, 1000);
}

StatusUpdater.prototype.stop =
function() {
window.clearInterval(this._interval);
}

StatusUpdater.prototype.update =
function() {
if (inElm && inElm.src) {
if (outElm) {
outElm.innerHTML = inElm.src;
}
}
}

And the usage would be:

var updater = new StatusUpdater("myImageId", "myLabelId");
updater.start();
updater.stop();

And you'd call updater.start() when you started the remote procedure,
then updater.stop() when you finished.

Is that a little beter?

Thanks for the insight,
~A!

 

[My Pet Programmer]

David Mark said:

More likely a div than a label. But a label is what the OP seems to
prefer.


You are setting a string property to an element object. (?)

It seems your solution needs a little more work (and explanation.)

I am not sure what the OP wants, but this can't be it.

So be it, then. Not what he wants, that's fine. You can set the property
to anything you like, though. It's definitely a hack, perhaps you could
give him a better solution?

~A!

 

[gnewsgroup]

More likely a div than a label. But a label is what the OP seems to
prefer.




You are setting a string property to an element object. (?)

It seems your solution needs a little more work (and explanation.)

I am not sure what the OP wants, but this can't be it.

OK, what I want is something like this (in C# instead of JavaScript,
to get my idea understood. BTW, we see such stuff all the time in
Thread programming tutorials.)

myLabel.Text = "Something to display...<br/>";
Thread.Sleep(1000);
myLabel.Text += "Something else to display...<br/>";
Thread.Sleep(1000);
myLabel.Text += "Some other stuff to show ... <br/>";

This will not work in an asp.net page. The page will be presented to
the browser after all of the output has been completed, and thus users
will see all 3 outputs above all at once.

It'll work if I do Response.Write in-line in the markup with
Response.Buffer = false. But, then it is hard to put these output in
a well-formatted page.

I hope that I have made myself understood.

 

[David Mark]

David Mark said:
 > As written, there is no way to stop this interval.

You're right, I didn't put a stop in. He should only have it run during
the update and then stop. Excellent point, I should have paid better
attention to detail.

 > Why getTimeMillis?

Is there a performance hit, or just a curiosity. It makes it clearer
what I'm doing in the code, I think. If it's inefficient, let me know
and I'll just comment better.

What's wrong with getTime? I've never even heard of getTimeMillis.

Ok, so an updated code listing then:

<script type="text/javascript">

function StatusUpdater(inID, outID) {
   this.inElm = document.getElementById(inID);
   this.outElm = document.getElementById(outID);
   this._interval;

That line doesn't do anything.

}

StatusUpdater.prototype.start =
   function() {
     this._interval = window.setInterval(this.update, 1000);
   }

StatusUpdater.prototype.stop =
   function() {
    window.clearInterval(this._interval);
   }

StatusUpdater.prototype.update =
   function() {
     if (inElm && inElm.src) {
       if (outElm) {
         outElm.innerHTML = inElm.src;
       }
     }
   }

You are confused. Did you try running this? Even if you straighten
out the errors, the best it will do is set the innerHTML of an element
to a URI.

And the usage would be:

var updater = new StatusUpdater("myImageId", "myLabelId");
updater.start();
updater.stop();

And you'd call updater.start() when you started the remote procedure,
then updater.stop() when you finished.

Is that a little beter?

Not really.

 

[David Mark]

David Mark said:










So be it, then. Not what he wants, that's fine. You can set the property
to anything you like, though. It's definitely a hack, perhaps you could
give him a better solution?

I don't understand your attempted solutions, nor do I fully comprehend
what the OP wants.

 

[David Mark]

OK, what I want is something like this (in C# instead of JavaScript,
to get my idea understood. BTW, we see such stuff all the time in
Thread programming tutorials.)

myLabel.Text = "Something to display...<br/>";
Thread.Sleep(1000);
myLabel.Text += "Something  else to display...<br/>";
Thread.Sleep(1000);
myLabel.Text += "Some other stuff to show ... <br/>";

This will not work in an asp.net page.  The page will be presented to
the browser after all of the output has been completed, and thus users
will see all 3 outputs above all at once.

It'll work if I do Response.Write in-line in the markup with
Response.Buffer = false.  But, then it is hard to put these output in
a well-formatted page.

I hope that I have made myself understood.

Write an element, then write script blocks that update the innerHTML
(or innerText) property of that element. If you need help with the
JavaScript involved, see the FAQ.

 

[My Pet Programmer]

Randy Webb said:

I'm not sure how to take that.

It was meant respectfully. I'm going to lay back and watch for a while,
since it seems I'm not paying any attention to detail.

~A!

 

[My Pet Programmer]

David Mark said:

What's wrong with getTime? I've never even heard of getTimeMillis.


That line doesn't do anything.


You are confused. Did you try running this? Even if you straighten
out the errors, the best it will do is set the innerHTML of an element
to a URI.


Not really.

Ok, you got me, I shouldn't have replied to this at all. I don't know
what the hell I'm even thinking today, but I sure as hell shouldn't be
writing code I don't know enough about.

~A!

 

[My Pet Programmer]

Randy Webb said:

And if you don't write it, you won't learn it, and where will that get
you? I have had my head bashed in so many times here over code I posted
I stopped letting it bother me.

Sounds like a plausible way to look at things, thanks for that. I'm
reading that best practices doc over at Javascript Toolbox right now,
actually.

~A!

 

[Dr J R Stockton]

In comp.lang.javascript message <[email protected]>
, Sun, 23 Dec 2007 16:25:02, My Pet Programmer

new Date().getTimeMillis();

Which browsers implement that?

Please post only code that has been tested, and use copy'n'paste to do
it.

 

[~A!]

In comp.lang.javascript message <[email protected]>
, Sun, 23 Dec 2007 16:25:02, My Pet Programmer


Which browsers implement that?

Please post only code that has been tested, and use copy'n'paste to do
it.

None, actually. It was an egregious and disgusting public display of
incompetence and lack of attention to detail. I've learned my lesson,
and I will not let it happen again.

~A!