Generic innerHTML functionality and other minor questions...

**Joshie Surber** · Nov 23 '05, 03:33 AM

Re: Generic innerHTML functionality and other minor questions...

> (1) Is there a DOM function which is very similar to innerHTML property

No, you have to create each element yourself.
[color=blue]
> (2.1) Can i use innerHTML property of SELECT (or even incorporate
> DynWrite function) and in such form update some selects boxes on some
> event ? (i ask because i saw the way which uses Option object, and
> assumed is it not as portable as innerHTML solution).[/color]

The Option object and innerHTML are both portable, implemented by
almost every browser. The option object predates innerHTML by a year or
two, but they are both used in every JS browser implementation that I
have heard of.
[color=blue]
> (2.2) Should i use XmlHttpRequest object (and it equivalent in IE from
> ActiveX - in the same way as it is used in Beta Google search site) or
> i must consider using something like jsrs:
> http://www.ashleyit.com/rs/main.htm (but i saw it uses browser sniffing
> in a way of testing objects like document.all or document.layers which
> in my opinion should not be this way - the best is to use object
> detection system).[/color]

I would use XMLHTTPObject simply because it is pretty much the same
everywhere (once you have created the object.)
[color=blue]
> (3) Does anyone know a project which beautifies harshed JavaScript code
> (like as.js from mentioned above beta google site which uses browser
> independent autocomplete solution for text boxes).[/color]

Run it thru indent(1) then run a few :%s/gvar/realVarName/g filters on
it in VIM.
[color=blue]
> (4) I have heard about 'this' keyword troubles, so generally my
> question is - do i have to use eg
> funtion MyConstructor() {
> var myRef = this;
> this.myMethod = function() {
> /* use myRef instead of keyword 'this' */
> }
> }
>
> MyConstructor.m yStaticPublicMe thod() { /* method tied up to
> MyConstructor function object */
> var myRef = this;
> /* use myRef instead of keyword 'this' */
> }[/color]

Neither... "this" is the instance of the function that calls it. For
example, if your constructor was called thus: newObject = new
MyConstructor() ;
then newObject.this == newObject. this is most useful for passing
objects as arguments; for example, using a form validator, you may use
<form onsubmit="valid ate(this)"> and then your validation function
could read
function validate(f) {
firstFormElemen t = f.elements[0];
...
}
[color=blue]
> I think thats all my questions, would be appreciate for answer (i tried
> to make this post as legible as i could).
> BR
> Luke M.[/color]

**Joshie Surber** · Nov 23 '05, 03:33 AM

Re: Generic innerHTML functionality and other minor questions...

> (1) Is there a DOM function which is very similar to innerHTML property

No, you have to create each element yourself.
[color=blue]
> (2.1) Can i use innerHTML property of SELECT (or even incorporate
> DynWrite function) and in such form update some selects boxes on some
> event ? (i ask because i saw the way which uses Option object, and
> assumed is it not as portable as innerHTML solution).[/color]

The Option object and innerHTML are both portable, implemented by
almost every browser. The option object predates innerHTML by a year or
two, but they are both used in every JS browser implementation that I
have heard of.
[color=blue]
> (2.2) Should i use XmlHttpRequest object (and it equivalent in IE from
> ActiveX - in the same way as it is used in Beta Google search site) or
> i must consider using something like jsrs:
> http://www.ashleyit.com/rs/main.htm (but i saw it uses browser sniffing
> in a way of testing objects like document.all or document.layers which
> in my opinion should not be this way - the best is to use object
> detection system).[/color]

I would use XMLHTTPObject simply because it is pretty much the same
everywhere (once you have created the object.)
[color=blue]
> (3) Does anyone know a project which beautifies harshed JavaScript code
> (like as.js from mentioned above beta google site which uses browser
> independent autocomplete solution for text boxes).[/color]

Run it thru indent(1) then run a few :%s/gvar/realVarName/g filters on
it in VIM.
[color=blue]
> (4) I have heard about 'this' keyword troubles, so generally my
> question is - do i have to use eg
> funtion MyConstructor() {
> var myRef = this;
> this.myMethod = function() {
> /* use myRef instead of keyword 'this' */
> }
> }
>
> MyConstructor.m yStaticPublicMe thod() { /* method tied up to
> MyConstructor function object */
> var myRef = this;
> /* use myRef instead of keyword 'this' */
> }[/color]

Neither... "this" is the instance of the function that calls it. For
example, if your constructor was called thus: newObject = new
MyConstructor() ;
then newObject.this == newObject. this is most useful for passing
objects as arguments; for example, using a form validator, you may use
<form onsubmit="valid ate(this)"> and then your validation function
could read
function validate(f) {
firstFormElemen t = f.elements[0];
...
}
[color=blue]
> I think thats all my questions, would be appreciate for answer (i tried
> to make this post as legible as i could).
> BR
> Luke M.[/color]

**Michael Winter** · Nov 23 '05, 03:33 AM

Re: Generic innerHTML functionality and other minor questions...

On 22/11/2005 08:55, Luke Matuszewski wrote:

[snip]
[color=blue]
> (1) Is there a DOM function which is very similar to innerHTML
> property eg. (my guess) setInnerNodeAsT ext or sth... ?[/color]

There is no way to pass a string containing HTML and have it parsed and
inserted into the document tree. However, text nodes are represented.
For example,

<p id="myP">Some <em>emphasise d</em> text.</p>

would create the following structure:

p (element)
+- 'Some ' (#text)
+- em (element)
| +- 'emphasised' (#text)
+- ' text.' (#text)

Text nodes have a data property and this can be modified:

var p = document.getEle mentById('myP') ,
text = p.firstChild;

text.data = 'Some different ';

resulting in the equivalent of:

<p id="myP">Some different <em>emphasise d</em> text.</p>

It's also possible to create additional text nodes, using the
document.create TextNode method.

[snip]
[color=blue]
> (2.1) Can i use innerHTML property of SELECT (or even incorporate
> DynWrite function) and in such form update some selects boxes on some
> event ?[/color]

Undoubtedly, but it's unlikely that I'd use it. Then again, you haven't
explained what you're trying to do.
[color=blue]
> (i ask because i saw the way which uses Option object, and assumed is
> it not as portable as innerHTML solution).[/color]

On the contrary. Using the innerHTML property is less portable.

The Option constructor is a de facto function originating from NN4, and
has gathered quite widespread support. Though W3C DOM methods can take
its place, the Option constructor is still preferred by some due to
greater support.
[color=blue]
> (2.2) Should i use XmlHttpRequest object [...] or i must consider
> using something like jsrs:[/color]

To do what? You really should stop asking questions without stating the
purpose behind them.

[snip]
[color=blue]
> (4) I have heard about 'this' keyword troubles, [...][/color]

Did you actually read the follow-ups I posted to your previous threads?
There are /no/ 'troubles'.

[snip]

Mike

--
Michael Winter
Prefix subject with [News] before replying by e-mail.

VK · Nov 23 '05, 03:33 AM

Re: Generic innerHTML functionality and other minor questions...

Michael Winter wrote:[color=blue][color=green]
> > (4) I have heard about 'this' keyword troubles, [...][/color]
>
> Did you actually read the follow-ups I posted to your previous threads?
> There are /no/ 'troubles'.[/color]

He's mentioning the recently discussed issue with broken
(non-canonical) "this" context behavior in inner object classes. It is
well analysed here:
<http://www.crockford.c om/javascript/private.html>
(Look for "workaround for an error in the ECMAScript Language
Specification which causes this to be set incorrectly for inner
functions").

VK · Nov 23 '05, 03:33 AM

Re: Generic innerHTML functionality and other minor questions...

> "this" context behavior in inner object classes

"this" context behavior in inner object *methods*

I'm getting again lexdyslic ...damn... dyslexic :-)

**Michael Winter** · Nov 23 '05, 03:33 AM

Re: Generic innerHTML functionality and other minor questions...

On 22/11/2005 10:02, Joshie Surber wrote:

[snip]
[color=blue]
> [...] "this" is the instance of the function that calls it.[/color]

Presumably that's a typo. If not, it's completely incorrect and I refer
you to a recent post of mine; another follow-up to Luke, as it happens.

Subject: Object oriented stuff and browsers related thing
Date: 2005-11-20 00:05
Message-Id: V4Pff.11769$Lw5 .510@text.news. blueyonder.co.u k

<http://groups.google.c o.uk/group/comp.lang.javas cript/browse_frm/thread/27beecb64c50485 9/1edf3029a9bed64 9#1edf3029a9bed 649>

Specifically the part that begins, "The value of the this operator...".

[snip]

Mike

--
Michael Winter
Prefix subject with [News] before replying by e-mail.

**Luke Matuszewski** · Nov 23 '05, 03:33 AM

Re: Generic innerHTML functionality and other minor questions...

Michael Winter napisal(a):[color=blue]
> On 22/11/2005 08:55, Luke Matuszewski wrote:[/color]
[color=blue][color=green]
> > (2.1) Can i use innerHTML property of SELECT (or even incorporate
> > DynWrite function) and in such form update some selects boxes on some
> > event ?[/color]
>
> Undoubtedly, but it's unlikely that I'd use it. Then again, you haven't
> explained what you're trying to do.
>
> The Option constructor is a de facto function originating from NN4, and
> has gathered quite widespread support. Though W3C DOM methods can take
> its place, the Option constructor is still preferred by some due to
> greater support.
>[color=green]
> > (2.2) Should i use XmlHttpRequest object [...] or i must consider
> > using something like jsrs:[/color]
>
> To do what? You really should stop asking questions without stating the
> purpose behind them.
>[/color]

I would like to have a page with few <select> elements in form. When
one select changes its selected value i would like to make a request to
the server CGI (Struts Action Object or PHP script or other CGI system
based program) with an request parameter which would be the value
selected by the user (so it would be probably by onchange event in
select element)
(sample code)
/* x is a reference to XmlHttpRequest */
/* 'this' is a reference to the <select> element <select ...
onchange="MakeR equest(this)" */
function getMyXmlHttpReq uestObject() {
var x = null;
try {
x=new ActiveXObject(" Msxml2.XMLHTTP" )
} catch(e) {
try {
x=new ActiveXObject(" Microsoft.XMLHT TP")
} catch(sc) {
x=null
}
}
if( !x && typeof XMLHttpRequest != "undefined" ) {
x=new XMLHttpRequest( )
}
return x;
}

function MakeRequest(sel ectElem) {
var x = getMyXmlHttpReq uestObject();
if(x) {
x.onreadystatec hange = changeOptionsIn AllSelect(selec tElem.form,
x);
/* [1] */
x.open("GET", "/bw/My_Strust_Actio n/SelectChanged.d o?"+
selectElem.name +"="+

selectElem.opti ons[selectElem.sele ctedIndex].value, true);
x.send(null);
/* [2] */
/* or via POST
x.open("POST", "/bw/My_Strust_Actio n/SelectChanged.d o", true);
x.send(selectEl em.name+"="+
selectElem.opti ons[selectElem.sele ctedIndex].value);
*/
}

function changeOptionsIn AllSelect(thisF orm, x) {
if( x.readyState == 4 && x.status == 200 ) {

var myXmlData = x.responseXml;
/* make changes... */
}

}

While i was in my University i realized that i really have to ask one
more question:

(1) When i send a request parameter via XmlHttpRequest object which
encoding of request parameter value would be used when sending eg.

1. (if the above script is on the page which was served in Content-Type
as text/html and with charset UTF-8, furthermore the <meta> element
with Content-Type suggest that charset is UTF-8)
The encoding of request parameter send (value of selected element) is
UTF-8.

2. (if the above script is included on the page (via pointing it with
src attrubute in <script> element and the charset attribute is set to
UTF-8) and the page was served in Content-Type as text/html and with
charset UTF-8, furthermore the <meta> is <meta
http-equiv="content-type" content="text/html; charset=UTF-8">)
[2] what encoding would be used if i will send the DOM object and how
it is sended then (in XML?).

**Luke Matuszewski** · Nov 23 '05, 03:33 AM

Re: Generic innerHTML functionality and other minor questions...

Michael Winter napisal(a):[color=blue]
> On 22/11/2005 08:55, Luke Matuszewski wrote:[/color]
[color=blue][color=green]
> > (2.1) Can i use innerHTML property of SELECT (or even incorporate
> > DynWrite function) and in such form update some selects boxes on some
> > event ?[/color]
>
> Undoubtedly, but it's unlikely that I'd use it. Then again, you haven't
> explained what you're trying to do.
>
> The Option constructor is a de facto function originating from NN4, and
> has gathered quite widespread support. Though W3C DOM methods can take
> its place, the Option constructor is still preferred by some due to
> greater support.
>[color=green]
> > (2.2) Should i use XmlHttpRequest object [...] or i must consider
> > using something like jsrs:[/color]
>
> To do what? You really should stop asking questions without stating the
> purpose behind them.
>[/color]

I would like to have a page with few <select> elements in form. When
one select changes its selected value i would like to make a request to
the server CGI (Struts Action Object or PHP script or other CGI system
based program) with an request parameter which would be the value
selected by the user (so it would be probably by onchange event in
select element)
(sample code)
/* x is a reference to XmlHttpRequest */
/* 'this' is a reference to the <select> element <select ...
onchange="MakeR equest(this)" */
function getMyXmlHttpReq uestObject() {
var x = null;
try {
x=new ActiveXObject(" Msxml2.XMLHTTP" )
} catch(e) {
try {
x=new ActiveXObject(" Microsoft.XMLHT TP")
} catch(sc) {
x=null
}
}
if( !x && typeof XMLHttpRequest != "undefined" ) {
x=new XMLHttpRequest( )
}
return x;
}

function MakeRequest(sel ectElem) {
var x = getMyXmlHttpReq uestObject();
if(x) {
x.onreadystatec hange = changeOptionsIn AllSelect(selec tElem.form,
x);
/* [1] */
x.open("GET", "/bw/My_Strust_Actio n/SelectChanged.d o?"+
selectElem.name +"="+

selectElem.opti ons[selectElem.sele ctedIndex].value, true);
x.send(null);
/* [2] */
/* or via POST
x.open("POST", "/bw/My_Strust_Actio n/SelectChanged.d o", true);
x.send(selectEl em.name+"="+
selectElem.opti ons[selectElem.sele ctedIndex].value);
*/
}

function changeOptionsIn AllSelect(thisF orm, x) {
if( x.readyState == 4 && x.status == 200 ) {

var myXmlData = x.responseXml;
/* make changes... */
}

}

While i was in my University i realized that i really have to ask one
more question:

(1) When i send a request parameter via XmlHttpRequest object which
encoding of request parameter value would be used when sending eg.

1. (if the above script is on the page which was served in Content-Type
as text/html and with charset UTF-8, furthermore the <meta> element
with Content-Type suggest that charset is UTF-8)
The encoding of request parameter send (value of selected element) is
UTF-8.

2. (if the above script is included on the page (via pointing it with
src attrubute in <script> element and the charset attribute is set to
UTF-8) and the page was served in Content-Type as text/html and with
charset UTF-8, furthermore the <meta> is <meta
http-equiv="content-type" content="text/html; charset=UTF-8">)
[2] what encoding would be used if i will send the DOM object and how
it is sended then (in XML?).

**Luke Matuszewski** · Nov 23 '05, 03:33 AM

Re: Generic innerHTML functionality and other minor questions...

I ask this questions about encoding because in most kind of browsers
the request parameters are encoded in the same encoding as the encoding
of the page served. But i don't really know what encoding will be used
when serving paramteres in XmlHttpRequest (or i should use aleready
escaped version of url in open (or send if POST) function call on
object x.

VK · Nov 23 '05, 03:33 AM

Re: Generic innerHTML functionality and other minor questions...

Luke Matuszewski wrote:[color=blue]
> I ask this questions about encoding because in most kind of browsers
> the request parameters are encoded in the same encoding as the encoding
> of the page served. But i don't really know what encoding will be used
> when serving paramteres in XmlHttpRequest (or i should use aleready
> escaped version of url in open (or send if POST) function call on
> object x.[/color]

The best answer to such questions is *experiment*. Create a testcase
and pass it through the spelled conditions on different browsers. See
if any consistency (which is not guaranteed at all as XMLHttpRequest as
a rather new addon implemented differently by different producers). If
any interesting results - or results at all - do not hesitate to post
them here! ;-)

**Luke Matuszewski** · Nov 23 '05, 03:33 AM

Re: Generic innerHTML functionality and other minor questions...

As a final note i realized that i can encode the parameter names and
its values via encode() function - so if i will pass something like
that
x.open("GET",
"/bw/My_Strust_Actio n/SelectChanged.d o?"+escape(sele ctElem.name+"=" +

selectElem.opti ons[selectElem.sele ctedIndex].value), true);
/* and further more if i know that the value and name property is taken
from my <select> element used on a page with UTF-8 encoding then it
should be escaped due to that encoding so eg latin characters like
polish l and a line crossing it would be encoded as %C5%82 for UTF-8
and %B3 in Windows-1250 encoding).

Does my assumptions are right ?

VK · Nov 23 '05, 03:33 AM

Re: Generic innerHTML functionality and other minor questions...

Luke Matuszewski wrote:[color=blue]
> As a final note i realized that i can encode the parameter names and
> its values via encode() function - so if i will pass something like
> that
> x.open("GET",
> "/bw/My_Strust_Actio n/SelectChanged.d o?"+escape(sele ctElem.name+"=" +
>
> selectElem.opti ons[selectElem.sele ctedIndex].value), true);
> /* and further more if i know that the value and name property is taken
> from my <select> element used on a page with UTF-8 encoding then it
> should be escaped due to that encoding so eg latin characters like
> polish l and a line crossing it would be encoded as %C5%82 for UTF-8
> and %B3 in Windows-1250 encoding).
>
> Does my assumptions are right ?[/color]

Not exactly.

1) As I explained before UTF-8 is a *transport encoding* thus UTF-8
char sequences are existing only during their travel time from server
to browser and from browser to server. At the moment you are able to
operate with strings using JavaScript, UTF-8 mission is already
completed and all char sequences are converted to the relevant Unicode
chars. So you never need to bother with UTF-8 transformations unless
you decided to emulate an HTTP server using JavaScript.

2) escape / unescape methods are working only with ASCII characters.
For Unicode transformations you have to use encodeURICompon ent /
decodeURICompon ent methods.

**Luke Matuszewski** · Nov 23 '05, 03:34 AM

Re: Generic innerHTML functionality and other minor questions...

When a user inputs some text in the form field it uses it's default
charset set by operating system, but those values inputed by user are
then transformed to encoding specified via Content-Type header in HTTP
response eg. Content-Type: text/html; charset=windows 1250 (so it is the
charset used for displaying the page on browser window and for
interpretation by browser - so it now knows what charset to use while
'decoding' the page contents for proper character recognition and then
displaying it (so polish l and a line crossing it would be encoded as
%C5%82 when charset=UTF-8 (takes 2 bytes) and %B3 when
charset=Windows-1250 encoding (takes only one byte).
Inputed values by user in form fields when submit action occurs are
then sent via POST or GET ... When it is POST then it is send in the
Message Body of the HTTP Request using the encoding specified in
mentioned above Content-Type. So HTTP Request looks like that:
[Browser makes HTTP Request via POST]
POST /bw/My_Strust_Actio n/SelectChanged.d o HTTP/1.1
Content-Type: application/x-www-form-urlencoded charset=UTF-8 (or
windows-1250/other)

my_param_name=m y_param_value&m y_param_name1=m y_param_value2

or

[Browser makes HTTP Request via GET (params and values are sent escaped
in URL part)]
GET
/bw/My_Strust_Actio n/SelectChanged.d o?escaped_param _name=escaped_p aram_value&esca ped_param_name1 =escaped_param_ value2
HTTP/1.1
Content-Type: application/x-www-form-urlencoded charset=UTF-8 (or
windows-1250/other)

To be more precise you must read
http://www.w3.org/TR/REC-html40/inte...html#h-17.13.4 (and
specified RFC docs).

Then at the server side - program which parses parameters and its
values can properly decode them because it knows the encoding of
parameters (at first it tries to replace %xx parts to its orginal
form).

Perhaps the biggest difference between the encodeURI() and escape()
functions (and their
decodeURI() and unescape() counterparts) is that the more modern
versions do not encode
a wide range of symbols that are perfectly acceptable as URI characters
according to the syntax
recommended in RFC2396 (http://www.ietf.org/rfc/rfc2396.txt). Thus, the
following
characters are not encoded via the encodeURI() function:
; / ? : @ & = + $ , - _ . ! ~ * ' ( ) #
Use the encodeURI() and decodeURI() functions only on complete URIs.
Applicable URIs can
be relative or absolute, but these two functions are wired especially
so symbols that are part
of the protocol (://), search string (? and =, for instance), and
directory-level delimiters (/)
are not encoded.
But as i assumed the string inside those functions is treated as
Unicode string so polish l and a line crossing it would be encoded as
%C5%82, and therefore the values and its names will be sent in Unicode
escaped version.

**Luke Matuszewski** · Nov 23 '05, 03:34 AM

Re: Generic innerHTML functionality and other minor questions...

It is true that escape() function produces %u0142 for polish l with a
line crossing readed from field by
forms["myForm"].elements["myFormFiel d"].value (not as is should, but
escape was introduced probably only for US-ASCII characters). encodeURI
or encodeURICompon ent() works very well and producing %C5%82. It
happens everytime no matter what charset in Content-Type of HTTP
response was used.
(becouse every string in JavaScript is in Unicode format - even
forms["myForm"].elements["myFormFiel d"].value string).

Then it is wise to write/serve pages in UTF-8 when we want to make play
with i18n. Then at server side treat request params and its values as
UTF-8 strings.

Anyway if open() function of XmlHttpRequest does not produces escape
mechanism for given URL (and probably containing parameters) it is best
to use encodeURI on given URL or encodeURICompon ent on URL fragment and
at server side treat reqest param values and its names as encoded in
UTF-8.

ECMAScript v1 defines string as is the set of all finite ordered
sequences of zero or more Unicode characters, but
encodeURI/encodeURICompon ent and its decode counterpartners are defined
since ECMAScript v3 (IE Windows 5.5 and N6 IE Mac ?).

Generic innerHTML functionality and other minor questions...

Generic innerHTML functionality and other minor questions...

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment