Problems with ASP.Net object and Javascript

T

tshad

I have a function:

function SalaryDisplay(me)
{
var salaryMinLabel = document.getElementById("SalaryMin");
salaryMinLabel.value = 200;
alert("after setting salaryMinLabel = " + salaryMinLabel.value);
}

I also have an asp.net object:

<asp:label id="SalaryMin" runat="server" />

Which renders into:

<span id="SalaryMin"></span>

The function seems to find the span fine. The alert box shows that it is
set to 200. But the web page never shows it.

Is there a problem setting the span element?

Thanks,

Tom
 
T

tshad

tshad said:
I have a function:

function SalaryDisplay(me)
{
var salaryMinLabel = document.getElementById("SalaryMin");
salaryMinLabel.value = 200;
alert("after setting salaryMinLabel = " + salaryMinLabel.value);
}

I also have an asp.net object:

<asp:label id="SalaryMin" runat="server" />

Which renders into:

<span id="SalaryMin"></span>

The function seems to find the span fine. The alert box shows that it is
set to 200. But the web page never shows it.

Is there a problem setting the span element?
Click to expand...

I just change the object to an asp:textbox which renders into an input field
on the screen and this works fine.

In asp, you use a label object to display (and change) text on the screen
that is not part of an input type of field.

Is there a way to do this in Javascript/html?

I just want to be able to display the results of some calculations on a
field that the user inputs as just a label.

Thanks,

Tom
 
T

tshad

I tried to do the same thing with the <lable> label item and had the same
problem. It shows that the value was changed, but it didn't seem to do
anything on the screen:

Yearly Compensation:<input name="SalaryMin" type="text" id="SalaryMin"
/>&nbsp;/&nbsp;
<span id="SalaryMax"></span>
<Label id="SalaryMin2" for="SalaryMin">This is a test</Label> />

The javascript code:

function SalaryDisplay(me)
{
alert("this.value = " + me.value);
var salaryMinLabel = document.getElementById("SalaryMin2");
salaryMinLabel.innerText = 200;
alert("after setting salaryMinLabel = " + salaryMinLabel.value);
}

This doesn't seem to work. I tried to do it directly
(SalaryMin2.innerText=200), but that didn't work either.

Tom
 
N

nutso fasst

tshad said:
Is there a problem setting the span element?
Click to expand...

A 'value' property on span does not display. The newly-created span element
is empty and needs to have a text node appended.

var salaryMinLabel = document.getElementById("SalaryMin");
var sMLText = document.createTextNode("200")
salaryMinLabel.appendChild(sMLText);
alert("after setting salaryMinLabel = " +
salaryMinLabel.firstChild.nodeValue);

nf
 
T

tshad

nutso fasst said:
A 'value' property on span does not display. The newly-created span
element
is empty and needs to have a text node appended.

var salaryMinLabel = document.getElementById("SalaryMin");
var sMLText = document.createTextNode("200")
salaryMinLabel.appendChild(sMLText);
alert("after setting salaryMinLabel = " +
salaryMinLabel.firstChild.nodeValue);
Click to expand...

Works great.

Is there a way to create the child node at the beginning somehow?

The problem is that as I call this routine It creates another node each
time. I assume the next time I do the document.getElementById("SalaryMin")
the child node will still be there (since it was appended to the next time I
did it).

I am confused as to why or how it is working.

The 200 is showing on the screen, but when I do a viewsource, it isn't there
and doesn't seem to be anywhere on the page.

Here is the script from the viewsource of the page:

<script language="javascript1.4">
function SalaryDisplay(me)
{
alert("this.value = " + me.value);
var salaryMinLabel = document.getElementById("SalaryMin");
var sMLText = document.createTextNode("200")
salaryMinLabel.appendChild(sMLText);
SalaryMin2.innerText = 200;
alert("after setting salaryMinLabel = " +
salaryMinLabel.firstChild.nodeValue);
}
</script>

Here is the html of the label (span):

&nbsp;&nbsp;Yearly Compens:<span id="SalaryMin"></span>&nbsp;/&nbsp;
<span id="SalaryMax"></span>

As you can see there is no 200 there.

Thanks,

Tom
 
T

tshad

Ok.

This obviously is not going to work. I spent a lot of time getting this
work correctly and just found that if you go back a page (or forward) and
then go back to the page - all this SPAN information that was just generated
is now gone. Probably related to why it doesn't appear in Viewsource.

Is there a way to make sure it stays with the page?

Thanks,

Tom
 
N

nutso fasst

tshad said:
Is there a way to make sure it stays with the page?
Click to expand...

The span tag is being created server-side (runat=server); that is the
'source' you view. Content changes you make client-side do not automatically
go back to the source, and they are not automatically saved/restored if you
switch to another page and then return. You could create a framed site and
save all current values for each page in variables in the top frame. I don't
know about .net, but suppose there is a database connector. Suggest you try
a Microsoft .net newsgroup.

nf
 
R

RobG

tshad said:
Ok.
Click to expand...

Please don't top-post - read the group FAQ:

This obviously is not going to work. I spent a lot of time getting this
work correctly and just found that if you go back a page (or forward) and
then go back to the page - all this SPAN information that was just generated
is now gone. Probably related to why it doesn't appear in Viewsource.
Click to expand...

The page source is what was loaded from the server. Whatever you do
locally with scripting does not change the source any more than
modifying a photocopy changes the original.

Some information from history pages may be saved in cache by browsers
and used when the page is re-visited, but that mostly applies to data
entered into forms fields. Even then, you should not depend on this
behaviour being consistent across browsers. I don't think any
browser will cache changes made by scripts.
Is there a way to make sure it stays with the page?
Click to expand...

This infers that you wish to maintain state somehow. Various methods
exist, such as storing user selections in a cookie or sending data
back to the server and then reconstructing the page when the user
re-visits. But that takes serious programming effort at both client
and server since the web is stateless and you are attempting to make
it otherwise.

[...]
 
T

tshad

RobG said:
Please don't top-post - read the group FAQ:



The page source is what was loaded from the server. Whatever you do
locally with scripting does not change the source any more than
modifying a photocopy changes the original.

Some information from history pages may be saved in cache by browsers
and used when the page is re-visited, but that mostly applies to data
entered into forms fields. Even then, you should not depend on this
behaviour being consistent across browsers. I don't think any
browser will cache changes made by scripts.


This infers that you wish to maintain state somehow. Various methods
exist, such as storing user selections in a cookie or sending data
back to the server and then reconstructing the page when the user
re-visits. But that takes serious programming effort at both client
and server since the web is stateless and you are attempting to make
it otherwise.
Click to expand...

No more that saving what is in the textboxes and which radio buttons that
were pushed. If you come back to the page, they are still there. Whatever
the SPAN originally was is also still there.

If I enter 100 into a text box and then hit the back button and then the
forward button, the box still has 100 in it. The 100 wasn't on the original
page that was sent. So it is saved somewhere. And not just what the user
puts in. I use Javascript to reformat the number to add a "$" and ","s.
When I come back, the number is still formatted.

But if I create a node for my SPAN in javascript (the same as my changing
the formatting in Javascript) to show calculated number as a label, I seem
to lose the Node I created. Why is that?

Thanks,

Tom
 
R

RobG

tshad wrote:
[...]
No more that saving what is in the textboxes and which radio buttons that
were pushed. If you come back to the page, they are still there. Whatever
the SPAN originally was is also still there.
Click to expand...

That's just how browsers work. Back in the good 'ol days, some
browsers didn't remember form values either but that was back with
Mozaic and Netscape 2 or somewhere back then.

I had a few comments on the code you've been posting, the only one of
use is in regard to your script tag: ditch the language attribute, it
is depreciated and will cause errors in some browsers.

You can do what you require if you have a form initialisation
function that looks at each form input and if there's something
there, runs the onchange if there is one.

Below is some sample code for what you are trying to do:

<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01//EN'
'http://www.w3.org/TR/html4/strict.dtd'>
<html><head>
<title>form thing</title>
<meta http-equiv='Content-Type'
content='text/html; charset=ISO-8859-1'>
<script type="text/javascript">

function writeToSpan(t,o) {
if (document.getElementById) {
o = document.getElementById(o);
} else if (document.all) {
o = document.all[o];
}
writeIt(t,o);
}

function writeIt(t,x) {
if ( x.firstChild && /\#text/i.test(x.firstChild.nodeName)) {
x.firstChild.data = t;
} else {
if (document.createTextNode) {
x.appendChild(document.createTextNode(t));
}
}
}

function initForm(f){
f = document.forms[f];
var i = f.length;
while (i--) {
if (/input/i.test(f.nodeName)
&& /text/i.test(f.type)
&& f.onchange
&& '' != f.value){
f.onchange();
}
}
}

</script>
</head>
<body onload="initForm('formA');">

<form action="" name="formA">
<p>Write text to page:
<input name="inA" type="text" onchange="
writeToSpan(this.value,'outA');
"><span id="outA"></span>
<br>
Write text to input:
<input name="inB" type="text" onchange="
this.form.outB.value = this.value;
"><input type="text" name="outB">
<br><br>
<label for="inC">Replace this label:
<br><input name="inC" id="inC" type="text" onchange="
writeIt(this.value,this.parentNode);
"></label>
<br><br>
<input type="reset">
</p>
</form>

</body>
</html>
 
R

RobG

RobG wrote:
[...]
function initForm(f){
f = document.forms[f];
var i = f.length;
while (i--) {
if (/input/i.test(f.nodeName)
&& /text/i.test(f.type)
&& f.onchange
&& '' != f.value){
f.onchange();
}
}
}
Click to expand...


Here is a more efficient initForm function:

function initForm(f){
f = document.forms[f];
var x, i = f.length;
while ( x = f[--i] ) {
if ( /text/i.test(x.type) && x.onchange && '' != x.value){
x.onchange();
}
}
}
</script>
</head>
<body onload="initForm('formA');">

<form action="" name="formA">
<p>Write text to page:
<input name="inA" type="text" onchange="
writeToSpan(this.value,'outA');
"><span id="outA"></span>
Click to expand...

And to test that only the onchange() is fired, put this into the form
about here:

<br>onblur Write text to page:
<input name="inD" type="text" onblur="
writeToSpan(this.value,'outD');
> said:
<br>
Write text to input:
<input name="inB" type="text" onchange="
this.form.outB.value = this.value;
"><input type="text" name="outB">
<br><br>
Click to expand...
[...]
 
T

tshad

These look pretty good.

I need to spend some time to digest them.

What does "/input/i.test(f.nodeName" and "/text/i.test(f.type" mean?

What I did on my page was to call the routine I use to create the SPAN label
Nodes. Since they are just calculated and formatted from a couple of text
fields (which are saved anyway), I just rebuild them from the text boxes.

<body class="ApplicantBody" onLoad="SalaryDisplayFromOnLoad()">

function SalaryDisplayFromOnLoad()
{
var WagesType = document.getElementById("WagesType");
SalaryDisplay(WagesType);
}

This seems to work. But doesn't take into account SPANs that are not
calculated from a text field and they only handle these specific labels, not
all the labels that might be created, as yours does.

Thanks,

Tom

RobG said:
RobG wrote:
[...]
function initForm(f){
f = document.forms[f];
var i = f.length;
while (i--) {
if (/input/i.test(f.nodeName)
&& /text/i.test(f.type)
&& f.onchange
&& '' != f.value){
f.onchange();
}
}
}
Click to expand...


Here is a more efficient initForm function:

function initForm(f){
f = document.forms[f];
var x, i = f.length;
while ( x = f[--i] ) {
if ( /text/i.test(x.type) && x.onchange && '' != x.value){
x.onchange();
}
}
}
</script>
</head>
<body onload="initForm('formA');">

<form action="" name="formA">
<p>Write text to page:
<input name="inA" type="text" onchange="
writeToSpan(this.value,'outA');
"><span id="outA"></span>
Click to expand...

And to test that only the onchange() is fired, put this into the form
about here:

<br>onblur Write text to page:
<input name="inD" type="text" onblur="
writeToSpan(this.value,'outD');
> said:
<br>
Write text to input:
<input name="inB" type="text" onchange="
this.form.outB.value = this.value;
"><input type="text" name="outB">
<br><br>
Click to expand...
[...]
Click to expand...
 
T

tshad

RobG said:
RobG wrote:
[...]
function initForm(f){
f = document.forms[f];
var i = f.length;
while (i--) {
if (/input/i.test(f.nodeName)
&& /text/i.test(f.type)
&& f.onchange
&& '' != f.value){
f.onchange();
}
}
}
Click to expand...


Here is a more efficient initForm function:

function initForm(f){
f = document.forms[f];
var x, i = f.length;
while ( x = f[--i] ) {
if ( /text/i.test(x.type) && x.onchange && '' != x.value){
x.onchange();
}
}
}
</script>
</head>
<body onload="initForm('formA');">

<form action="" name="formA">
<p>Write text to page:
<input name="inA" type="text" onchange="
writeToSpan(this.value,'outA');
"><span id="outA"></span>
Click to expand...

And to test that only the onchange() is fired, put this into the form
about here:

<br>onblur Write text to page:
<input name="inD" type="text" onblur="
writeToSpan(this.value,'outD');
"><span id="outD"></span>
Click to expand...

I don't quite understant this one?

Why is the onblur where it is? I may have misunderstood.

Here is what I think you said:

**********************************************8
<form action="" name="formA">
<p>Write text to page:
<input name="inA" type="text"
onchange="writeToSpan(this.value,'outA');"><span id="outA"></span>

<br>onblur Write text to page:
<input name="inD" type="text" onblur="
writeToSpan(this.value,'outD');
"><span id="outD"></span>

<br>
Write text to input:<input name="inB" type="text"
onchange="this.form.outB.value = this.value;">
<input type="text" name="outB">
<br><br>
<label for="inC">Replace this label:<br>
<input name="inC" id="inC" type="text"
onchange="writeIt(this.value,this.parentNode);">
</label>
<br><br>
<input type="reset">
</p>
</form>
*****************************************************************

Not sure what that does.

Tom
<br>
Write text to input:
<input name="inB" type="text" onchange="
this.form.outB.value = this.value;
"><input type="text" name="outB">
<br><br>
Click to expand...
[...]
Click to expand...
 
R

RobG

tshad said:
These look pretty good.

I need to spend some time to digest them.

What does "/input/i.test(f.nodeName" and "/text/i.test(f.type" mean?
Click to expand...


/input/i creates a regular expression (RegExp) out of 'input' and the
i flag makes it case insensitive. 'test' will compare it to the
element f nodeName to see if it's an input.

It is effectively the same as:

if (f.nodeName.toLowerCase() == 'input')

The HTML spec says to make such comparisons case insensitive, the
RegExp is fast.

The second test looks at the type of input - we want to match only
text inputs. It's probably not necessary to test nodeName before
type, I just figured some browsers may barf if you try to get the
type of a node that doesn't have one (e.g. label) but that seems not
to be the case.
What I did on my page was to call the routine I use to create the SPAN label
Nodes. Since they are just calculated and formatted from a couple of text
fields (which are saved anyway), I just rebuild them from the text boxes.

<body class="ApplicantBody" onLoad="SalaryDisplayFromOnLoad()">

function SalaryDisplayFromOnLoad()
{
var WagesType = document.getElementById("WagesType");
SalaryDisplay(WagesType);
}

This seems to work. But doesn't take into account SPANs that are not
calculated from a text field and they only handle these specific labels, not
all the labels that might be created, as yours does.

Thanks,
Click to expand...
[...]
 
R

RobG

tshad said:
RobG wrote:
[...] [...]
<form action="" name="formA">
<p>Write text to page:
<input name="inA" type="text" onchange="
writeToSpan(this.value,'outA');
"><span id="outA"></span>
Click to expand...

And to test that only the onchange() is fired, put this into the form
about here:

<br>onblur Write text to page:
<input name="inD" type="text" onblur="
writeToSpan(this.value,'outD');
"><span id="outD"></span>
Click to expand...
I don't quite understant this one?

Why is the onblur where it is? I may have misunderstood.
Click to expand...

I just put an onblur there to show that the function only ran
onchange events and nothing else. It's only there for testing.
Here is what I think you said:

**********************************************8
<form action="" name="formA">
<p>Write text to page:
<input name="inA" type="text"
onchange="writeToSpan(this.value,'outA');"><span id="outA"></span>
Click to expand...

This calls writeToSpan() and passes the value of the text input and
the id of where to write the output to. Both are strings.
<br>onblur Write text to page:
<input name="inD" type="text" onblur="
writeToSpan(this.value,'outD');
"><span id="outD"></span>
Click to expand...

This is just a test to show that onblur is not run by the onload,
only the onchange events.
<br>
Write text to input:<input name="inB" type="text"
onchange="this.form.outB.value = this.value;">
Click to expand...

This assigns the of this input to the one called outB.
<input type="text" name="outB">
<br><br>
<label for="inC">Replace this label:<br>
<input name="inC" id="inC" type="text"
onchange="writeIt(this.value,this.parentNode);">
Click to expand...

And this one calls writeIt() and passes the value of the text input
and a reference to the parent node (which is the label). Note that
the label will only be the parent if the text input is between the
label tags.
</label>
<br><br>
<input type="reset">
</p>
</form>
*****************************************************************

Not sure what that does.
Click to expand...
[...]

It's just a sample to illustrate how it all works, hopefully written
in reasonably clear and concise code. Use whatever helps.
 
G

Grant Wagner

RobG said:
tshad said:
These look pretty good.

I need to spend some time to digest them.

What does "/input/i.test(f.nodeName" and "/text/i.test(f.type"
mean?
Click to expand...


/input/i creates a regular expression (RegExp) out of 'input' and the
i flag makes it case insensitive. 'test' will compare it to the
element f nodeName to see if it's an input.

It is effectively the same as:

if (f.nodeName.toLowerCase() == 'input')
Click to expand...


Not to pick a nit, but nit-picking is what we do here:

if (/input/i.test(f.nodeName))

is closer to: if (f.nodeName.toLowerCase().indexOf('input') != -1)

than it is to: if (f.nodeName.toLowerCase() == 'input')

The reason I prefer the regex is because f.nodeName may not be typeof
'string', and if it isn't, f.nodeName.toLowerCase() will fail. Of
course this could be avoided with:

if ('string' == typeof f.nodeName &&
f.nodeName.toLowerCase().indexOf('input') != -1)

but:

if (/input/i.test(f.nodeName))

is easier to read, probably faster (although speed isn't the primary
consideration in choosing this mechanism) and guaranteed to produce the
correct result regardless of the typeof f.nodeName.
 
T

Thomas 'PointedEars' Lahn

David said:
Span elements don't have values. You need to create a new text node then
append it to the element to add text to it. Look at the JavaScript section
of the DOM 1 specification. http://w3.org/DOM/
Click to expand...

There is no JavaScript section (only an `ECMAScript binding' section),
and since W3C DOM Level 1 HTML has been obsoleted by W3C DOM Level 2 HTML
which builds on W3C DOM Level 2 Core, one should look at the latter
instead. The respective sections are:

<http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-1950641247>
<http://www.w3.org/TR/DOM-Level-2-Core/ecma-script-binding.html>


PointedEars
 
T

Thomas 'PointedEars' Lahn

tshad said:
<script language="javascript1.4">
Click to expand...

This is not Valid HTML and error-prone. Use

<script type="text/javascript">

instead.


PointedEars
 
D

David Dorward

Thomas 'PointedEars' Lahn wrote:

There is no JavaScript section (only an `ECMAScript binding' section),
Click to expand...

synonyms :)
and since W3C DOM Level 1 HTML has been obsoleted by W3C DOM Level 2 HTML
which builds on W3C DOM Level 2 Core, one should look at the latter
instead.
Click to expand...

The DOM 2 spec says that it builds on the DOM 1 spec, so wouldn't it
supplement it rather then obsolete it?
 

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

Similar Threads

Problems with ASP.Net object and Javascript 4
I am trying to detect Which image id="" was clicked ? 22
JavaScript: how to keep track of the circle in canvas on specific path? 0
Mandatory Elements To Conduct JavaScript Form Manipulation 7
Problem with android and scrolling with <input textarea 5
Only one table shows up with the information 2
Why is this WordPress comments form not submitting? 1
Popup HTML help 5

Members online

Total: 35 (members: 2, guests: 33)
Robots: 506

Forum statistics

Threads
473,769
Messages
2,569,579
Members
45,053
Latest member
BrodieSola

Latest Threads

Top