Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > Problems with ASP.Net object and Javascript

Reply
Thread Tools

Problems with ASP.Net object and Javascript

 
 
RobG
Guest
Posts: n/a
 
      04-08-2005
tshad wrote:
[...]
>>
>>>Is there a way to make sure it stays with the page?

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

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


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[i].nodeName)
&& /text/i.test(f[i].type)
&& f[i].onchange
&& '' != f[i].value){
f[i].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>

--
Rob
 
Reply With Quote
 
 
 
 
RobG
Guest
Posts: n/a
 
      04-08-2005
RobG wrote:
[...]
>
> function initForm(f){
> f = document.forms[f];
> var i = f.length;
> while (i--) {
> if (/input/i.test(f[i].nodeName)
> && /text/i.test(f[i].type)
> && f[i].onchange
> && '' != f[i].value){
> f[i].onchange();
> }
> }
> }


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>


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>

> <br>
> Write text to input:
> <input name="inB" type="text" onchange="
> this.form.outB.value = this.value;
> "><input type="text" name="outB">
> <br><br>

[...]


--
Rob
 
Reply With Quote
 
 
 
 
tshad
Guest
Posts: n/a
 
      04-08-2005
These look pretty good.

I need to spend some time to digest them.

What does "/input/i.test(f[i].nodeName" and "/text/i.test(f[i].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" <(E-Mail Removed)> wrote in message
news:qvn5e.807$(E-Mail Removed)...
> RobG wrote:
> [...]
>>
>> function initForm(f){
>> f = document.forms[f];
>> var i = f.length;
>> while (i--) {
>> if (/input/i.test(f[i].nodeName)
>> && /text/i.test(f[i].type)
>> && f[i].onchange
>> && '' != f[i].value){
>> f[i].onchange();
>> }
>> }
>> }

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

>
> 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>
>
>> <br>
>> Write text to input:
>> <input name="inB" type="text" onchange="
>> this.form.outB.value = this.value;
>> "><input type="text" name="outB">
>> <br><br>

> [...]
>
>
> --
> Rob



 
Reply With Quote
 
tshad
Guest
Posts: n/a
 
      04-08-2005

"RobG" <(E-Mail Removed)> wrote in message
news:qvn5e.807$(E-Mail Removed)...
> RobG wrote:
> [...]
>>
>> function initForm(f){
>> f = document.forms[f];
>> var i = f.length;
>> while (i--) {
>> if (/input/i.test(f[i].nodeName)
>> && /text/i.test(f[i].type)
>> && f[i].onchange
>> && '' != f[i].value){
>> f[i].onchange();
>> }
>> }
>> }

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

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

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>

> [...]
>
>
> --
> Rob



 
Reply With Quote
 
RobG
Guest
Posts: n/a
 
      04-08-2005
tshad wrote:
> These look pretty good.
>
> I need to spend some time to digest them.
>
> What does "/input/i.test(f[i].nodeName" and "/text/i.test(f[i].type" mean?


/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[i] nodeName to see if it's an input.

It is effectively the same as:

if (f[i].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,
>

[...]


--
Rob
 
Reply With Quote
 
RobG
Guest
Posts: n/a
 
      04-08-2005
tshad wrote:
> "RobG" <(E-Mail Removed)> wrote in message
> news:qvn5e.807$(E-Mail Removed)...
>
>>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>

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

> I don't quite understant this one?
>
> Why is the onblur where it is? I may have misunderstood.
>


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>


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>


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;">


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);">


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

[...]

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


--
Rob
 
Reply With Quote
 
Grant Wagner
Guest
Posts: n/a
 
      04-11-2005
"RobG" <(E-Mail Removed)> wrote in message
news:4256bbce$0$28135$(E-Mail Removed)...
> tshad wrote:
>> These look pretty good.
>>
>> I need to spend some time to digest them.
>>
>> What does "/input/i.test(f[i].nodeName" and "/text/i.test(f[i].type"
>> mean?

>
> /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[i] nodeName to see if it's an input.
>
> It is effectively the same as:
>
> if (f[i].nodeName.toLowerCase() == 'input')


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

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

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

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

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

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

but:

if (/input/i.test(f[i].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[i].nodeName.

--
Grant Wagner <(E-Mail Removed)>
comp.lang.javascript FAQ - http://jibbering.com/faq


 
Reply With Quote
 
Thomas 'PointedEars' Lahn
Guest
Posts: n/a
 
      04-11-2005
David Dorward wrote:

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


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
 
Reply With Quote
 
Thomas 'PointedEars' Lahn
Guest
Posts: n/a
 
      04-11-2005
tshad wrote:

> <script language="javascript1.4">


This is not Valid HTML and error-prone. Use

<script type="text/javascript">

instead.


PointedEars
--
There are two possibilities: Either we are alone in the
universe or we are not. Both are equally terrifying.
-- Arthur C. Clarke
 
Reply With Quote
 
David Dorward
Guest
Posts: n/a
 
      04-11-2005
Thomas 'PointedEars' Lahn wrote:


> There is no JavaScript section (only an `ECMAScript binding' section),


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.


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

--
David Dorward <http://blog.dorward.me.uk/> <http://dorward.me.uk/>
Home is where the ~/.bashrc is
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Copy Java Object into JavaScript Object Rahul Java 2 04-23-2007 11:06 AM
Object creation - Do we really need to create a parent for a derieved object - can't the base object just point to an already created base object jon wayne C++ 9 09-22-2005 02:06 AM
Problems with ASP.Net object and Javascript tshad ASP .Net 4 04-21-2005 12:49 PM
Re: pass javascript object reference to a session object naijacoder naijacoder ASP .Net 0 09-15-2004 02:01 AM
Re: pass javascript object reference to a session object Girish bharadwaj ASP .Net 0 09-15-2004 01:55 AM



Advertisments