getElementsByNa me undefined for dynamic elements (radio buttons)

[Saul]

I have a set of radio buttons that are created dynamically, after
rendered I try loop thru this set by getting the length of the set, but
I keep getting an error stating the element is undefined. I am using
getElelementsBy Name since these are radio buttons, but it seems that
the dynamic element is not seen!!!

This is my code... please let me know if there is anything that I am
doing wrong! - thanks
----
....
....
// this loops thru an ajax structure --- this is correct so I kow is
not an Ajax issue.

for(var i=0; i<ds.Tables[0].Rows.length; i++){
//creating nue input element
var r=document.crea teElement('<INP UT type=radio name=company >');
r.type="radio";
r.name ="company";
r.id ="myradiobutton " + i;
r.setAttribute( "value",ds.Tabl es[0].Rows[i].roottype);
td_company.appe ndChild(r);
td_company.appe ndChild(documen t.createTextNod e(ds.Tables[0].Rows[i].roottypedesc)) ;
}

-----
My function trying to get the lenght of the set is called after the
radion buttons are rendered. If I find one that has an specific value,
I check it.

for(var n=0; n<document.getE lementsByName(" company").lengt h; n++){
if (document.getEl ementsByName("c ompany")[n].value == 'msde')
{
document.getEle mentsByName("co untry")[n].checked = "checked";
}
}

[ASM]

Saul a écrit :

I have a set of radio buttons that are created dynamically, after
rendered I try loop thru this set by getting the length of the set, but
I keep getting an error stating the element is undefined. I am using
getElelementsBy Name since these are radio buttons, but it seems that
the dynamic element is not seen!!!

This is my code... please let me know if there is anything that I am
doing wrong! - thanks
----
...
...
// this loops thru an ajax structure --- this is correct so I kow is
not an Ajax issue.

for(var i=0; i<ds.Tables[0].Rows.length; i++){
//creating nue input element
var r=document.crea teElement('<INP UT type=radio name=company >');
var r=document.crea teElement('INPU T');
r.type="radio";
r.name ="company";
r.id ="myradiobutton " + i;
r.setAttribute( "value",ds.Tabl es[0].Rows[i].roottype);
roottype isn't it Java language ?
td_company.appe ndChild(r);
what is td_company ?
td_company.appe ndChild(documen t.createTextNod e(ds.Tables[0].Rows[i].roottypedesc)) ;
}

-----
My function trying to get the lenght of the set is called after the
radion buttons are rendered. If I find one that has an specific value,
I check it.

for(var n=0; n<document.getE lementsByName(" company").lengt h; n++){
if (document.getEl ementsByName("c ompany")[n].value == 'msde')
{
document.getEle mentsByName("co untry")[n].checked = "checked";
}
}

var R = document.getEle mentsByName("co mpany");
var C = document.getEle mentsByName("co untry");
for(var n=0; n<R.length; n++)
if (R[n].value == 'msde') C[n].checked = "checked";

to avoid to re-built these two collections (R & C)
on each loop
--
Stephane Moriaux et son [moins] vieux Mac

[RobG]

Saul said on 05/05/2006 7:01 AM AEST:

I have a set of radio buttons that are created dynamically, after
rendered I try loop thru this set by getting the length of the set, but
I keep getting an error stating the element is undefined. I am using
getElelementsBy Name since these are radio buttons, but it seems that
the dynamic element is not seen!!!

This is my code... please let me know if there is anything that I am
doing wrong! - thanks
----
...
...
// this loops thru an ajax structure --- this is correct so I kow is
not an Ajax issue.

for(var i=0; i<ds.Tables[0].Rows.length; i++){
Is ds.Tables an array of table elements? If so, and item[0] is a table,
then it has a 'rows' collection, not 'Rows' (note capitalisation) . But
maybe it is some part of your XML structure that is called 'Rows', I
don't know.

Since you sequentially access all rows, it is also better to get a
reference to the row once and go from there.

It is more efficient to get the length attribute once and store it (the
saving may be insignificant if the number of rows is small, but it's the
thought that counts :-) ):

var row, rows = ds.Tables[0].rows;
for(var i=0, len=rows.length ; i<len; i++){
row = rows[i];

//creating nue input element
var r=document.crea teElement('<INP UT type=radio name=company >');
That method of dynamically adding elements is IE specific and will fail
in most (possibly all) other browsers, the W3C DOM standard method is:

var r = document.create Element('input' );
r.type = 'radio';
r.name = 'company';

However, if that method is used, IE doesn't recognise the name attribute
in script, though the form will submit correctly. There is a thread
about it here:

<URL:http://groups.google.c o.uk/group/comp.lang.javas cript/browse_frm/thread/db95b9f62035bee 6/a86500f9f588024 6?q=name+create Element&rnum=2# a86500f9f588024 6>

r.type="radio";
r.name ="company";
r.id ="myradiobutton " + i;
r.setAttribute( "value",ds.Tabl es[0].Rows[i].roottype);
setAttribute is buggy in some browsers, it is better (though
non-standard) to access properties directly as you have above:

r.value = ds.Tables[0].Rows[i].roottype;

td_company.appe ndChild(r);
td_company.appe ndChild(documen t.createTextNod e(ds.Tables[0].Rows[i].roottypedesc)) ;
Using the suggested row & rows variables above, this becomes:

td_company.appe ndChild(documen t.createTextNod e(row.roottyped esc));

}

-----
My function trying to get the lenght of the set is called after the
radion buttons are rendered. If I find one that has an specific value,
I check it.

for(var n=0; n<document.getE lementsByName(" company").lengt h; n++){
if (document.getEl ementsByName("c ompany")[n].value == 'msde')
{
document.getEle mentsByName("co untry")[n].checked = "checked";

Similarly here:

var el, els = document.getEle mentsByName("co mpany");
for(var n=0, len=els.length; n<len; n++){
el = els[i];
if (el.value == 'msde') {
el.checked = true;
}

--
Rob
Group FAQ: <URL:http://www.jibbering.c om/FAQ>

[ASM]

RobG a écrit :

Saul said on 05/05/2006 7:01 AM AEST: [...]

for(var n=0; n<document.getE lementsByName(" company").lengt h; n++){
if (document.getEl ementsByName("c ompany")[n].value == 'msde')
{
document.getEle mentsByName("co untry")[n].checked = "checked";

Similarly here:

Similarly but not duplicately ( "company" != "country" )
var el, els = document.getEle mentsByName("co mpany");
for(var n=0, len=els.length; n<len; n++){
el = els[i];
if (el.value == 'msde') {
el.checked = true;
}

var el, els = document.getEle mentsByName("co mpany");
var en, ens = document.getEle mentsByName("co untry");
for(var n=0, len=els.length; n<len; n++){
el = els[n]; // and not els[i]
if (el.value == 'msde') {
en = ens[n];
en.checked = true;
}
}
--
Stephane Moriaux et son [moins] vieux Mac

[RobG]

ASM said on 05/05/2006 12:31 PM AEST:

RobG a écrit :

Saul said on 05/05/2006 7:01 AM AEST:

[...]

for(var n=0; n<document.getE lementsByName(" company").lengt h; n++){
if (document.getEl ementsByName("c ompany")[n].value == 'msde')
{
document.getEle mentsByName("co untry")[n].checked = "checked";

Similarly here:

Similarly but not duplicately ( "company" != "country" )

Yeah, well, depends on the country, doesn't it? ;-)

var el, els = document.getEle mentsByName("co mpany");
for(var n=0, len=els.length; n<len; n++){
el = els[i];
if (el.value == 'msde') {
el.checked = true;
}

var el, els = document.getEle mentsByName("co mpany");
var en, ens = document.getEle mentsByName("co untry");
for(var n=0, len=els.length; n<len; n++){
el = els[n]; // and not els[i]
if (el.value == 'msde') {
en = ens[n];
en.checked = true;

If I'd seen company/country I'd likey have done:

var companys = document.getEle mentsByName("co mpany");
var countries = document.getEle mentsByName("co untry");
var n = companys.length ;
while (n--){
countries[n].checked = (companies[n].value == 'msde');
}

Of course it's not very tollerant of cases where companys.length is less
than countires.lengt h, but neither was the OP. :-)
--
Rob
Group FAQ: <URL:http://www.jibbering.c om/FAQ>

[RobG]

RobG said on 05/05/2006 12:49 PM AEST:
[...]

var companys = document.getEle mentsByName("co mpany");
var companies = ...
var countries = document.getEle mentsByName("co untry");
var n = companys.length ;
var n = companies.lengt h;
while (n--){
countries[n].checked = (companies[n].value == 'msde');
}

Of course it's not very tollerant of cases where companys.length is less

... companies.lengt h ...

--
Rob
Group FAQ: <URL:http://www.jibbering.c om/FAQ>

[Saul]

thanks for your replies...

ds is a dataset coming from an Ajax call and roottype is an element of
this set... I am sure the Ajax call is not the issue(since the data is
obtained and rendered correctly) and this is why I focused in the
javascript part to find the problem.

The elements are createed correctly when I loop thru the array. The
radio buttons are there and are visible inside the div tag "td_company "
The issue arises when trying to reference the element "company" which
is the name given to all the radio buttons created dynamically.

if I write an alert from inside the function creating the radio
buttons, to output the company.length ... I get the correct value.
If I write the alert outside the function I always get a zero. So
trying"

document.getEle mentsByName("co mpany").length

in the caller function always returns zero and therefore i cannot loop.
- but the radio buttons are there, how can it be zero!
Also using document.getEle mentsByName("co mpany")[0].value to find out
the value of the first element of the set of radio buttons returns
document.getEle mentsByName(... )[...].value is undefined.

I tried the different recommendations above, but still get the same
issue! - Any other suggestions

[Saul]

thanks for your replies...

ds is a dataset coming from an Ajax call and roottype is an element of
this set... I am sure the Ajax call is not the issue(since the data is
obtained and rendered correctly) and this is why I focused in the
javascript part to find the problem.

The elements are createed correctly when I loop thru the array. The
radio buttons are there and are visible inside the div tag "td_company "
The issue arises when trying to reference the element "company" which
is the name given to all the radio buttons created dynamically.

if I write an alert from inside the function creating the radio
buttons, to output the company.length ... I get the correct value.
If I write the alert outside the function I always get a zero. So
trying"

document.getEle mentsByName("co mpany").length

in the caller function always returns zero and therefore i cannot loop.
- but the radio buttons are there, how can it be zero!
Also using document.getEle mentsByName("co mpany")[0].value to find out
the value of the first element of the set of radio buttons returns
document.getEle mentsByName(... )[...].value is undefined.

I tried the different recommendations above, but still get the same
issue! - Any other suggestions

-thanks

[RobG]

Saul wrote:

thanks for your replies...
Please quote the relevant parts of what you are replying to.

ds is a dataset coming from an Ajax call and roottype is an element of
this set... I am sure the Ajax call is not the issue(since the data is
obtained and rendered correctly) and this is why I focused in the
javascript part to find the problem.
I'll guess that -ds.Tables[0].Rows- is referring to your XML structure,
not the HTMLElement structure suggested by the names you've used.

The elements are createed correctly when I loop thru the array. The
radio buttons are there and are visible inside the div tag "td_company "
The issue arises when trying to reference the element "company" which
is the name given to all the radio buttons created dynamically.
Exactly. IE has trouble with the name attribute of elements added
dynamically - from Microsoft's documentation:

"The NAME attribute cannot be set at run time on elements
dynamically created with the createElement method. To create
an element with a name attribute, include the attribute and
value when using the createElement method."

<URL:http://msdn.microsoft. com/workshop/author/dhtml/reference/properties/...>
Read the thread I suggested provides 2 work-arounds, here it is again;

<URL:http://groups.google.c o.uk/group/comp.lang.javas cript/browse_frm/thread/db95b9f62035bee 6/a86500f9f588024 6?q=name+create Element&rnum=2# a86500f9f588024 6>
[...]
I tried the different recommendations above, but still get the same
issue! - Any other suggestions

Try one of the methods in the suggested thread. Here's mine, I'm sure
you can adapt it to your circumstance:
<script type="text/javascript">

function addRadios(form, grpName, num)
{
var oRadio, e;
var dom = true;
for (var i=0; i<num; ++i){
if (dom){

// Create radio button, give it a name and add to form
oRadio = document.create Element('input' );
oRadio.name = grpName;
form.appendChil d(oRadio);

// Test if can access radio button group
// If not, remove element and set dom
if ( 0 == i && !document.getEl ementsByName(gr pName).length){
dom = false;
form.removeChil d(oRadio);
}
}

// If dom set to false, use IE method to add element
if (!dom){
try {
oRadio = document.create Element('<input type="radio"'
+ ' name="' + grpName + '">');
form.appendChil d(oRadio);
} catch (e){ e = true;}

// If got to here and no error, add attributes to element
// and element to document
}
if (!e){
oRadio.type = 'radio';
oRadio.onclick = rbClicked;
oRadio.value = grpName + ' ' + i;
form.appendChil d(document.crea teTextNode('rad-' + i));
form.appendChil d(document.crea teElement('br') );
}
}
}

// A play onclick function to show name is set
function rbClicked(){
alert('Clicked me!'
+ '\nName: ' + this.name
+ '\nValue: ' + this.value);
}
</script>

<form action="" name="aFrom"><d iv>
<input type="button" value="Add radios"
onclick="addRad ios(this.form, 'rBtnGrp', 4);"><br>
<input type="button" value="Click second radio"
onclick="
alert('There are ' + document.getEle mentsByName('rB tnGrp').length
+ ' radio buttons');
this.form.rBtnG rp[1].click();
"><br>
</div></form>

--
Rob

[RobG]

RobG wrote:

Exactly. IE has trouble with the name attribute of elements added
dynamically - from Microsoft's documentation:

"The NAME attribute cannot be set at run time on elements
dynamically created with the createElement method. To create
an element with a name attribute, include the attribute and
value when using the createElement method."

<URL:http://msdn.microsoft. com/workshop/author/dhtml/reference/properties/...>

Sorry, should be:

<URL:http://msdn.microsoft. com/workshop/author/dhtml/reference/properties/name_2.asp>
--
Rob