Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > Acess Dynamically Created Elements

Reply
Thread Tools

Acess Dynamically Created Elements

 
 
bradb
Guest
Posts: n/a
 
      02-27-2006
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

 
Reply With Quote
 
 
 
 
RobG
Guest
Posts: n/a
 
      02-27-2006
bradb wrote:
> 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.


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


> 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() ?


Yes.


>
> Any ideas/solutions? More information needed?


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
 
Reply With Quote
 
 
 
 
bradb
Guest
Posts: n/a
 
      02-28-2006
This is the function that gets called to create the checkbox...

function ent_source(num) {
var str = "source_"+num;
var id_field = "src_over"+num;
var replace = "(Source Over?)<input type=checkbox id='"+id_field+"'
onClick='updateField("+id_field+")'>";
document.getElementById(str).innerHTML = replace;
}

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

 
Reply With Quote
 
jshanman
Guest
Posts: n/a
 
      02-28-2006
bradb wrote:
> This is the function that gets called to create the checkbox...
>
> function ent_source(num) {
> var str = "source_"+num;
> var id_field = "src_over"+num;
> var replace = "(Source Over?)<input type=checkbox id='"+id_field+"'
> onClick='updateField("+id_field+")'>";
> document.getElementById(str).innerHTML = replace;
> }
>
> And I get an error immediately after clicking the check box saying
> something like:
> Error: src_over10 is not defined


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

So change this:
> var replace = "(Source Over?)<input type=checkbox id='"+id_field+"'
> onClick='updateField("+id_field+")'>";


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

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='updateField(this.id)'>";

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

- JS
http://www.endeavorpub.com

 
Reply With Quote
 
bradb
Guest
Posts: n/a
 
      02-28-2006
Thanks! Looks/Works great!

 
Reply With Quote
 
Thomas 'PointedEars' Lahn
Guest
Posts: n/a
 
      02-28-2006
jshanman wrote:

> bradb wrote:
>> This is the function that gets called to create the checkbox...
>>
>> function ent_source(num) {
>> var str = "source_"+num;
>> var id_field = "src_over"+num;
>> var replace = "(Source Over?)<input type=checkbox id='"+id_field+"'
>> onClick='updateField("+id_field+")'>";
>> document.getElementById(str).innerHTML = replace;
>> }
>>
>> And I get an error immediately after clicking the check box saying
>> something like:
>> Error: src_over10 is not defined

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


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.

> So change this:
>> var replace = "(Source Over?)<input type=checkbox id='"+id_field+"'
>> onClick='updateField("+id_field+")'>";

>
> To this:
> var replace = "(Source Over?)<input type=checkbox id='"+id_field+"'
> onClick='updateField(\'"+id_field+"\')'>";
>
> 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.


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='updateField('src_over10')'>
^ ^
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='updateField(\"" + id_field + "\")'>";

(it helps to pretty-print code ) which generated

...<input type='checkbox' id='src_over10'
onClick='updateField("src_over10")'>

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="updateField(this);">';

which generated

...<input type="checkbox" onclick="updateField(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
 
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
Affecting a dynamically created drop down from another dynamically created drop down. msimmons ASP .Net 0 07-16-2009 03:17 PM
Managing ViewState of a dynamically created Custom Composite Server Control -(where the original is also dynamically created) dickster ASP .Net Building Controls 0 12-08-2005 09:32 AM
IE6 won't hide dynamically created span elements Nicholas Couch Javascript 20 09-26-2004 01:37 PM
javaserver faces and dynamically created form elements Ittay Dror Java 0 04-19-2004 03:54 AM
Access dynamically created Form elements Will Javascript 1 01-23-2004 12:20 PM



Advertisments