Using Elements Created on the fly

[Michael Hill]

I created an element on-the-fly using javascript like:

myA=document.cr eateElement("A" );
myA.href="Javas cript:acton(thi s)";
myA.className = "smallLink" ;
myText=document .createTextNode ('sometext');
myA.appendChild (myText);

Then when I pressed the link I'd like to change the 'className' of this
link from 'smallLink' to 'biggerLink', but nothing happens.

function action(obj)
{
//alert(obj);
obj.className=" biggerlink";
}

When I look at alert(obj) I get "[object]".
When I look at alert(obj.class Name) I get "undefined" .

Anyone know what I am doing wrong here?

Mike

[George Hester]

Re: Using Elements Created on the fly

Maybe

return obj.className=" biggerlink";

--
George Hester
_______________ _______________ ____
"Michael Hill" <hillmw@ram.lmt as.lmco.com> wrote in message news:40183FAC.7 CFE4731@ram.lmt as.lmco.com...[color=blue]
> I created an element on-the-fly using javascript like:
>
> myA=document.cr eateElement("A" );
> myA.href="Javas cript:acton(thi s)";
> myA.className = "smallLink" ;
> myText=document .createTextNode ('sometext');
> myA.appendChild (myText);
>
> Then when I pressed the link I'd like to change the 'className' of this
> link from 'smallLink' to 'biggerLink', but nothing happens.
>
> function action(obj)
> {
> //alert(obj);
> obj.className=" biggerlink";
> }
>
> When I look at alert(obj) I get "[object]".
> When I look at alert(obj.class Name) I get "undefined" .
>
> Anyone know what I am doing wrong here?
>
> Mike
>[/color]

[Richard Cornford]

Re: Using Elements Created on the fly

"Michael Hill" <hillmw@ram.lmt as.lmco.com> wrote in message
news:40183FAC.7 CFE4731@ram.lmt as.lmco.com...
<snip>[color=blue]
> myA=document.cr eateElement("A" );
> myA.href="Javas cript:acton(thi s)";
> myA.className = "smallLink" ;
> myText=document .createTextNode ('sometext');
> myA.appendChild (myText);[/color]
<snip>[color=blue]
> function action(obj)
> {
> //alert(obj);
> obj.className=" biggerlink";
> }[/color]
<snip>

Javascript pseudo protocol HREFs are not methods of the created object
and are executed in the global scope, so - this - refers to the global
object and setting/creating a - className - property on the global
object is pointless.

You should never use javascript pseudo protocol HREFs:-

<URL: http://jibbering.com/faq/#FAQ4_24 >

- but to solve your specific problem you need to assign an onclick
method to the created object instead (though you will need the link to
have a HREF else it will not be a link, but then it probably could be a
SPAN element instead). E.g.:-

myA.onclick = function(){
this.className= "biggerlink ";
return false;
}

- or -

myA.onclick = new Funciton("this. className=\"big gerlink\";retur n
false;");

- depending on whether you understand the consequences of assigning an
inner function to an event handler or not (and/or whether the ECMA
Script compact profile will be relevant).

Richard.

[Michael Hill]

Re: Using Elements Created on the fly

>[color=blue]
> - but to solve your specific problem you need to assign an onclick
> method to the created object instead (though you will need the link to
> have a HREF else it will not be a link, but then it probably could be a
> SPAN element instead). E.g.:-
>
> myA.onclick = function(){
> this.className= "biggerlink ";
> return false;
> }
>[/color]

Richard,

Are you suggesting I change to something like:

mySPAN=document .createElement( "SPAN");
mySPAN.classNam e = "smallLink" ;
mySPAN.onclick = new Function("this. className=\"big gerlink\";retur n
false;");
myText=document .createTextNode ('sometext');
mySPAN.appendCh ild(myText);

Mike

[Richard Cornford]

Re: Using Elements Created on the fly

"Michael Hill" <hillmw@charter .net> wrote in message
news:101i21kp00 vtv14@corp.supe rnews.com...[color=blue][color=green]
>>
>>- but to solve your specific problem you need to assign an
>>onclick method to the created object instead (though you will
>>need the link to have a HREF else it will not be a link, but
>>then it probably could be a SPAN element instead). E.g.:-
>>
>>myA.onclick = function(){
>> this.className= "biggerlink ";
>> return false;
>>}[/color][/color]
[color=blue]
> Are you suggesting I change to something like:
>
>mySPAN=documen t.createElement ("SPAN");
>mySPAN.classNa me = "smallLink" ;
>mySPAN.oncli ck = new Function("this. className=\"big gerlink\";
>return false;");[/color]

I assume you realise that the preceding line should not wrap.
[color=blue]
> myText=document .createTextNode ('sometext');
>mySPAN.appendC hild(myText);[/color]

I don't have enough information about the context to make that
judgement. But the original code seemed to be attempting to create an
element that, when clicked on, change CSS styles but did nothing else
and given that browsers that support creating new elements also support
onclick events on most elements (including SPANs) a SPAN element might
be better suited to the task.

The important things are to never use a javascript pseudo-protocol HREF
if it is not going to directly result in the replacement of the current
page, and that if you want to refer to an element with the - this -
keyword you can only do so from within a function that is a method of
the element, not code that is executed in the global context as a side
effect of clicking on it. (and never even consider doing anything
proposed by George Hester. Doing the opposite, or just banging your head
on a desk a few times, would always be more productive.)

Beyond that the type of element used depends on the design and
specification for the task. But an A element has inherent behaviour that
users understand an indicating a link with which they can navigate to
another page and undermining the user's expectation is generally not
considered good UI design.

Richard.

[George Hester]

Re: Using Elements Created on the fly

Jesus Richard why continue bashing me? What's the purpose? I been bashed I been made to eat dog meat you won! Are you a happy camper now? What's wrong with you? You don't like me that's fine. You need to tesase like a juvinelle. Are you that insecure that all in the world must know you dislike like? Grow up man!@!!

--
George Hester
_______________ _______________ ____
"Richard Cornford" <Richard@litote s.demon.co.uk> wrote in message news:bvb5su$feu $1$830fa79d@new s.demon.co.uk.. .[color=blue]
> "Michael Hill" <hillmw@charter .net> wrote in message
> news:101i21kp00 vtv14@corp.supe rnews.com...[color=green][color=darkred]
> >>
> >>- but to solve your specific problem you need to assign an
> >>onclick method to the created object instead (though you will
> >>need the link to have a HREF else it will not be a link, but
> >>then it probably could be a SPAN element instead). E.g.:-
> >>
> >>myA.onclick = function(){
> >> this.className= "biggerlink ";
> >> return false;
> >>}[/color][/color]
> [color=green]
> > Are you suggesting I change to something like:
> >
> >mySPAN=documen t.createElement ("SPAN");
> >mySPAN.classNa me = "smallLink" ;
> >mySPAN.oncli ck = new Function("this. className=\"big gerlink\";
> >return false;");[/color]
>
> I assume you realise that the preceding line should not wrap.
> [color=green]
> > myText=document .createTextNode ('sometext');
> >mySPAN.appendC hild(myText);[/color]
>
> I don't have enough information about the context to make that
> judgement. But the original code seemed to be attempting to create an
> element that, when clicked on, change CSS styles but did nothing else
> and given that browsers that support creating new elements also support
> onclick events on most elements (including SPANs) a SPAN element might
> be better suited to the task.
>
> The important things are to never use a javascript pseudo-protocol HREF
> if it is not going to directly result in the replacement of the current
> page, and that if you want to refer to an element with the - this -
> keyword you can only do so from within a function that is a method of
> the element, not code that is executed in the global context as a side
> effect of clicking on it. (and never even consider doing anything
> proposed by George Hester. Doing the opposite, or just banging your head
> on a desk a few times, would always be more productive.)
>
> Beyond that the type of element used depends on the design and
> specification for the task. But an A element has inherent behaviour that
> users understand an indicating a link with which they can navigate to
> another page and undermining the user's expectation is generally not
> considered good UI design.
>
> Richard.
>
>[/color]

[Michael Winter]

Re: Using Elements Created on the fly

On Thu, 29 Jan 2004 15:37:07 GMT, George Hester <hesterloli@hot mail.com>
wrote:

[Fixed and trimmed top-post]
[color=blue]
> "Richard Cornford" <Richard@litote s.demon.co.uk> wrote in message
> news:bvb5su$feu $1$830fa79d@new s.demon.co.uk.. .
>[color=green]
>> The important things are to never use a javascript pseudo-protocol
>> HREF if it is not going to directly result in the replacement of
>> the current page, and that if you want to refer to an element with
>> the - this - keyword you can only do so from within a function that
>> is a method of the element, not code that is executed in the global
>> context as a side effect of clicking on it. (and never even
>> consider doing anything proposed by George Hester. Doing the
>> opposite, or just banging your head on a desk a few times, would
>> always be more productive.)[/color]
>
> Jesus Richard why continue bashing me? What's the purpose? I been
> bashed I been made to eat dog meat you won! Are you a happy camper
> now? What's wrong with you? You don't like me that's fine. You
> need to tesase like a juvinelle. Are you that insecure that all in
> the world must know you dislike like? Grow up man!@!![/color]

Actually, I believe the point of Mr Cornford's comments were to warn the
OP against following your useless advice. Did you actually try your
suggestion? I doubt it, for if you did, you would find that the entire
page would be replaced by the text, biggerlink. I might normally attempt
to explain why but the last time I offered you the explanation to a
problem, you told me, though more tersely, to f*** myself.

Mr Cornford's remarks about the OP "banging his head" are quite correct;
it would have been more productive than your suggestion. At least the OP
would only have the current situation to continue with, not the added
worry of why his page suddenly disappeared.

Mike

--
Michael Winter
M.Winter@blueyo nder.co.invalid (replace ".invalid" with ".uk" to reply)

[Michael Hill]

Re: Using Elements Created on the fly

> Javascript pseudo protocol HREFs are not methods of the created object[color=blue]
> and are executed in the global scope, so - this - refers to the global
> object and setting/creating a - className - property on the global
> object is pointless.
>
> You should never use javascript pseudo protocol HREFs:-
>[/color]

Richard,

I was thinking about this some more and I thought I'd let you know that I
totally agree. I am using this though to open another window so it should
be ok to use a link in this case.

Here's that code modified some more:

I happen to be iterating over an array and producing some rows here,
putting in a link because I want the use to be able to click on them and
open a window:

<snip>
myA=document.cr eateElement("A" );
myA.href="Javas cript:void();"
myA.className = "smallLink" ;
//here I am creating bogus attributes and tieing them to the link object,
I'll need them later
myA.tmp1 = child_array[j][i-2]; // this is the parent number that is
key in the database
myA.tmp2 = child_array[j][i-1]; // this is the child number that is
also part of the key in the database
myA.onclick = function (evt) { this.className= "smallred";
edit_action(thi s.tmp1,this.tmp 2); return false; };
// this is the text title
myText=document .createTextNode (child_array[j][i]);
// Appends the text node to the td
myA.appendChild (myText);
<snip>

function edit_action(p_i d,id)
{
var win = window.open("so mepgm?p_num="+p _id+"&c_num="+i d,<snip>
win.focus();
}

1) do you think this is a proper use, now?
2) this code works, but doesn't change the color of the link until after
the window opens. I want the link to change color immediately so the user
knows "something" is happening. Sometimes it takes the users window a min
to open. I don't want the user to be clicking on this over and over.

Thanks for your comments.

Mike

[Richard Cornford]

Re: Using Elements Created on the fly

"George Hester" <hesterloli@hot mail.com> wrote in message
news:DM9Sb.611$ iJ3.306@twister .nyroc.rr.com.. .[color=blue]
>Jesus Richard why continue bashing me? What's the purpose?[/color]
<snip>

As Mr Winter correctly surmised, my comments were intended as a warning
to the OP rather than a superfluous effort to bash you.

You have made it abundantly clear (by belittling and directly insulting
everyone who has ever offered you any good advice here) that you are
completely confident in the validity of your coding style. Based as it
is on scouring the Internet and newsgroups for any old half-ass hack
that superficially satisfies your criteria for a solution and then
jamming them into web pages without any real understanding of the code
used, its mechanism or the consequences. And that you don't see any need
to do anything differently.

Eventually its inevitable consequences will demonstrate to you why your
whole approach is so spectacularly wrong. And when that happens the only
people left willing to talk to you will not be capable of doing any more
than offering you more half-ass hacks, as you have already reached a
position where none of the people on this group who know how to properly
implement a browser script are willing to bother with you at all. And
you have stated that that suites you just fine.

But as your hack agglomerate approaches its inevitable fatal complexity
threshold you are inventing fairy tails to explain the artefacts of the
ensuing chaos, and as a result are in the unique position of knowing
less and less about browser scripting as time goes by.

There is nothing that can be done about that (and ever less people
willing to try). That doesn't matter, you can rattle about in your own
misconceptions to you harts content. But when you start bothering other
people with your nonsense they deserve to be warned that the best that
they can expect from you is the worst approach available, that normally
what you say is an baseless fantasy and at worst your suggestions will
be positively harmful.

Richard.

[Richard Cornford]

Re: Using Elements Created on the fly

"Michael Hill" <hillmw@ram.lmt as.lmco.com> wrote in message
news:40194F79.C 76E9BDB@ram.lmt as.lmco.com...
<snip>[color=blue]
> myA=document.cr eateElement("A" );
> myA.href="Javas cript:void();"[/color]

It is probably harmless here because the onclick handler returns false
and cancels the navigation and without JavaScript enabled the A element
will never be created but javascript pseudo-protocol HREFs really should
be avoided as a matter of habit.
[color=blue]
>myA.classNam e = "smallLink" ;
>//here I am creating bogus attributes and tieing them to
>//the link object, I'll need them later
>myA.tmp1 = child_array[j][i-2]; // this is the parent
> //number that is key in the database
>myA.tmp2 = child_array[j][i-1]; // this is the child
> //number that is also part of the key in the database[/color]
[color=blue]
>myA.onclick = function (evt) { this.className= "smallred";
>edit_action(th is.tmp1,this.tm p2); return false; };[/color]

This is OK so long as you are aware that assigning an inner function as
an event handler will produce a closure and that has implications
(particularly provoking the memory leak bug on IE browsers).

If you are creating numerous A elements with identical onclick functions
and having them retrieve the data they need from expando properties on
those elements then you could create a separate named function
definition and assign a reference to it to the onclick properties.

[color=blue]
> // this is the text title
> myText=document .createTextNode (child_array[j][i]);
> // Appends the text node to the td
>myA.appendChil d(myText);
><snip>
>
> function edit_action(p_i d,id)
> {
> var win = window.open("so mepgm?p_num="+
> p_id+"&c_num="+ id,<snip>[/color]

Not all browsers support a window.open function and calling it
unverified on one of those browsers will generate an error.
[color=blue]
> win.focus();
> }
>
>1) do you think this is a proper use, now?[/color]

Yes, in principal if clicking on a link is going to result in the
display of a new page then that is probably within the expectations of
the users, even if that page is in a new window. Of course they may
still be confused if they happen to be operating a pop-up blocker or a
browser with that feature built in.

Generally the issues surrounding the consequences of the common use of
pop-up blocking mechanisms makes me always recommend never even
attempting to open a new window with a script. Even the most reliable
window opening script ever presented on this group is nowhere near
reliable enough for practical use.
[color=blue]
>2) this code works, but doesn't change the color of the link
>until after the window opens. I want the link to change color
>immediately so the user knows "something" is happening.
>Sometimes it takes the users window a min to open. I don't
>want the user to be clicking on this over and over.[/color]

You could experiment with using onmousedown to set the className for the
element and onclick to open the new window, or a CSS style for the
active link but it might just be that the browser/system is too busy
opening the new window to re-draw the existing one with the new styles.

It has been observed that changing the className property of an element
causes the browser to do considerably more work than would be required
by just making the relevant changes to the element's style object.

But I would not expect a long delay between opening a new window and its
contents starting to download to delay re-drawing of the original
window, there should be sufficient system resources available for the
existing window to be re-drawn while the new window is waiting for a
response to its initial request.

Richard.

[Michael Hill]

Re: Using Elements Created on the fly

> >myA.classNam e = "smallLink" ;[color=blue][color=green]
> >//here I am creating bogus attributes and tieing them to
> >//the link object, I'll need them later
> >myA.tmp1 = child_array[j][i-2]; // this is the parent
> > //number that is key in the database
> >myA.tmp2 = child_array[j][i-1]; // this is the child
> > //number that is also part of the key in the database[/color]
>[color=green]
> >myA.onclick = function (evt) { this.className= "smallred";
> >edit_action(th is.tmp1,this.tm p2); return false; };[/color]
>
> This is OK so long as you are aware that assigning an inner function as
> an event handler will produce a closure and that has implications
> (particularly provoking the memory leak bug on IE browsers).[/color]

Do you know of a better way to assign these values?

Mike

[Michael Hill]

Re: Using Elements Created on the fly

> You could experiment with using onmousedown to set the className for the[color=blue]
> element and onclick to open the new window, or a CSS style for the
> active link but it might just be that the browser/system is too busy
> opening the new window to re-draw the existing one with the new styles.[/color]

onmousedown works great!

Mike

[Michael Hill]

Re: Using Elements Created on the fly

>[color=blue]
> If you are creating numerous A elements with identical onclick functions
> and having them retrieve the data they need from expando properties on
> those elements then you could create a separate named function
> definition and assign a reference to it to the onclick properties.
>
>[/color]

Richard,

Yes I am, each is the same except for the combination of parent/child that
is passed.

Can you give me an example of what you are talking about here?

Mike

[Richard Cornford]

Re: Using Elements Created on the fly

"Michael Hill" <hillmw@ram.lmt as.lmco.com> wrote in message
news:40199271.6 396A19A@ram.lmt as.lmco.com...
<snip>[color=blue][color=green][color=darkred]
>>>myA.onclic k = function (evt) { this.className= "smallred";
>>>edit_action( this.tmp1,this. tmp2); return false; };[/color]
>>
>>This is OK so long as you are aware that assigning an inner
>>function as an event handler will produce a closure and that
>>has implications (particularly provoking the memory leak bug
>>on IE browsers).[/color]
>
> Do you know of a better way to assign these values?[/color]

The method I posted to your preceding question is probably the safest
method with the least potential side effects (probably none). But better
or best would depend on the circumstances/context. I could probably come
up with 20-odd variations on assigning event handlers to elements, many
of them involving closures/inner functions and probably each well suited
to one context or another.

Richard.

[Richard Cornford]

Re: Using Elements Created on the fly

"Michael Hill" <hillmw@ram.lmt as.lmco.com> wrote in message
news:401991B9.2 4BF4B70@ram.lmt as.lmco.com...[color=blue][color=green]
>>... create a separate named function definition and
>>assign a reference to it to the onclick properties.[/color]
>
> Richard,
>
>Yes I am, each is the same except for the combination of
>parent/child that is passed.
>
>Can you give me an example of what you are talking about
>here?[/color]

function forA_OnClick(ev t){
edit_action(thi s.tmp1,this.tmp 2);
return false;
}
function forA_OnMouseDow n(){
this.className= "smallred";
}

Then later in the function that creates the elements:-

myA.onclick = forA_OnClick;
myA.onmousedown = forA_OnMouseDow n;

One function object is created for each function definition (in the
global scope) and then the name of the function is used to assign a
reference to that function object to the corresponding event handlers of
each A element created. No matter how many A elements are created they
all share references to the same function objects but the functions are
executed as methods of the elements so - this - always refers to the
element on which the handler is being called. Because the functions are
defined as global functions they are not inner function so assigning
references to them do not form closures.

Richard.