Acess Dynamically Created Elements

[bradb]

Hello,
I have a textbox with an empty span element (place holder) next to it.
When the user adds some text to the text box, I create a checkbox in
the empty span element. When I create the checkbox I create a unique
ID for the checkbox and associate an OnClick event with it. When I
proceede to check that checkbox, I get a javascript error stating that
the id is not defined. This is a dynamically created element, but
shouldn't the ID of that element still be added to the DOM tree for
acess via getElementByID( ) ?

Any ideas/solutions? More information needed?
Thanks
-Brad

[RobG]

Re: Acess Dynamically Created Elements

bradb wrote:[color=blue]
> Hello,
> I have a textbox with an empty span element (place holder) next to it.
> When the user adds some text to the text box, I create a checkbox in
> the empty span element. When I create the checkbox I create a unique
> ID for the checkbox and associate an OnClick event with it. When I
> proceede to check that checkbox, I get a javascript error stating that
> the id is not defined.[/color]

How does the checkbox's onclick event get the id?

[color=blue]
> This is a dynamically created element, but
> shouldn't the ID of that element still be added to the DOM tree for
> acess via getElementByID( ) ?[/color]

Yes.

[color=blue]
>
> Any ideas/solutions? More information needed?[/color]

Yes and yes - show how you create the element and attach the onclick and
the onclick script that can't find the id.

Generally an element gets a reference to itself with 'this', so using its
ID is not necessary.


--
Rob

[bradb]

Re: Acess Dynamically Created Elements

This is the function that gets called to create the checkbox...

function ent_source(num) {
var str = "source_"+n um;
var id_field = "src_over"+ num;
var replace = "(Source Over?)<input type=checkbox id='"+id_field+ "'
onClick='update Field("+id_fiel d+")'>";
document.getEle mentById(str).i nnerHTML = replace;
}

And I get an error immediately after clicking the check box saying
something like:
Error: src_over10 is not defined

[jshanman]

Re: Acess Dynamically Created Elements

bradb wrote:[color=blue]
> This is the function that gets called to create the checkbox...
>
> function ent_source(num) {
> var str = "source_"+n um;
> var id_field = "src_over"+ num;
> var replace = "(Source Over?)<input type=checkbox id='"+id_field+ "'
> onClick='update Field("+id_fiel d+")'>";
> document.getEle mentById(str).i nnerHTML = replace;
> }
>
> And I get an error immediately after clicking the check box saying
> something like:
> Error: src_over10 is not defined[/color]

Its looking for the object or variable src_over10, you want it to pass
the string "src_over10 ".

So change this:[color=blue]
> var replace = "(Source Over?)<input type=checkbox id='"+id_field+ "'
> onClick='update Field("+id_fiel d+")'>";[/color]

To this:
var replace = "(Source Over?)<input type=checkbox id='"+id_field+ "'
onClick='update Field(\'"+id_fi eld+"\')'>";

Notice the two \' around the "+id_field+ " , it's probably hard to see.
This will send the string "src_over10 " to the updateField function,
which can be used with a getElementById.

You could also do this:
var replace = "(Source Over?)<input type=checkbox id='"+id_field+ "'
onClick='update Field(this.id)' >";

Which will do the exact same thing, and save a millisecond or two.

- JS

http://www.endeavorpub.com

[bradb]

Re: Acess Dynamically Created Elements

Thanks! Looks/Works great!

[Thomas 'PointedEars' Lahn]

Re: Acess Dynamically Created Elements

jshanman wrote:
[color=blue]
> bradb wrote:[color=green]
>> This is the function that gets called to create the checkbox...
>>
>> function ent_source(num) {
>> var str = "source_"+n um;
>> var id_field = "src_over"+ num;
>> var replace = "(Source Over?)<input type=checkbox id='"+id_field+ "'
>> onClick='update Field("+id_fiel d+")'>";
>> document.getEle mentById(str).i nnerHTML = replace;
>> }
>>
>> And I get an error immediately after clicking the check box saying
>> something like:
>> Error: src_over10 is not defined[/color]
>
> Its looking for the object or variable src_over10, you want it to pass
> the string "src_over10 ".[/color]

Not necessarily. It might be that the OP is using the deprecated IE-based
method of accessing element objects by their respective property of the
Global Object (or the object that comes before it in the scope chain) in
the event handler attribute value.
[color=blue]
> So change this:[color=green]
>> var replace = "(Source Over?)<input type=checkbox id='"+id_field+ "'
>> onClick='update Field("+id_fiel d+")'>";[/color]
>
> To this:
> var replace = "(Source Over?)<input type=checkbox id='"+id_field+ "'
> onClick='update Field(\'"+id_fi eld+"\')'>";
>
> Notice the two \' around the "+id_field+ " , it's probably hard to see.
> This will send the string "src_over10 " to the updateField function,
> which can be used with a getElementById.[/color]

No, it won't. One important aspect of SGML-based attribute value delimiters
is that they must not occur unescaped (in _markup_ terms) in the attribute
value, else the attribute value is considered to end there. Here the
attribute value delimiter is the apostrophe or single quote ('), therefore
it must not occur in the attribute value.

The markup parser does not care about the ECMAScript string literal notation
that might have been used to generate it because it never sees that code,
including the escape sequence "\'". It only sees "'", and therefore (if we
assume that num === 10)

<input type=checkbox id='"src_over10 ' onClick='update Field('src_over 10')'>
^ ^
The trailing "src_over10 ')'" may be ignored as an unrecognized attribute
value by the markup parser instead of causing an error. The recognized
attribute value, 'updateField(', is a syntax error for the script engine
to which this is passed, though.

Therefore, one correct variant is:

var replace = "(Source Over?)<input type='checkbox' id='" + id_field
+ "' onClick='update Field(\"" + id_field + "\")'>";

(it helps to pretty-print code ;-)) which generated

...<input type='checkbox' id='src_over10'
onClick='update Field("src_over 10")'>

in that case (watch for word wrap).

However, the target element of an event can be referred to with `this':

var replace = '(Source Over?)<input type="checkbox" '
+ ' onclick="update Field(this);">' ;

which generated

...<input type="checkbox" onclick="update Field(this);">

always.

You will observe that the generated checkbox does not need an ID at all
if object references are passed to and used directly in the updateField()
method, and the checkbox form control is not referred elsewhere.

The generated '(Source Over?)' substring is... strange, BTW.


PointedEars

[Thomas 'PointedEars' Lahn]

Re: Acess Dynamically Created Elements

bradb wrote:
[color=blue]
> Thanks! Looks/Works great![/color]

Only by chance.


PointedEars