DOM Scripting Not Working In IE

[HugeBob]

Hi All,

I've written some Javascript that dynamically adds a row to an
existing table. It then adds table cells with radio buttons in each
cell. This script works fine in Firefox. But, in IE it only works up
to a point. The code follows. Everything happens as it should except
that the radio buttons don't function: i.e., you can't check any of
them.

var table = document.getElementById(IDArg);
var rows = table.getElementsByTagName("tr");
var insertionIndex=0, checkBoxID, currentIDNumber;

// Calculation insertion index
if (rows.length == 1)
insertionIndex = 1;
else
{
for (var i = 1; i < rows.length; i++)
{
currentIDNumber = parseInt(rows.id.substring(2));
checkBoxID = parseInt(id);
if (checkBoxID < currentIDNumber)
{
insertionIndex = i;
break;
}
}
if (insertionIndex == 0)
insertionIndex = rows.length;
}

var newHTMLTableRow = table.insertRow(insertionIndex); // Create
table row
newHTMLTableRow.setAttribute("id", "ps"+idArg); // Set its id
attribute

var rowLabelCell = document.createElement("td"); // Create row title
cell
rowLabelCell.setAttribute("class", "title"); // Set its class to
"title". NOT WORKING IN IE
rowLabelCell.setAttribute("width", "300"); // Set its width to 300
rowLabelCell.appendChild(document.createTextNode(textArg)); // Append
text node to the cell
var specSpanText = document.createElement("span"); // Create a span
specSpanText.setAttribute("class", "explanation"); // Set the span's
class
specSpanText.appendChild(document.createTextNode(" (specialized)
")); // Append text to the span
rowLabelCell.appendChild(specSpanText); // Append the span to the row
title cell

var radioCell1 = document.createElement("td");
radioCell1.align = "center";
var radioButton1 = document.createElement("input");
radioButton1.type = "radio";
radioButton1.name = nameArg;
radioButton1.value = valueArg;
if (defaultArg1 == radioButton1.value)
radioButton1.checked = true;
radioCell1.appendChild(radioButton1);

var radioCell2 = document.createElement("td");
radioCell2.align = "center";
var radioButton2 = document.createElement("input");
radioButton2.type = "radio";
radioButton2.name = nameArg;
radioButton2.value = valueArg;
if (defaultArg2 == radioButton2.value)
radioButton2.checked = true;
radioCell2.appendChild(radioButton2);

var radioCell3 = document.createElement("td");
radioCell3.align = "center";
var radioButton3 = document.createElement("input");
radioButton3.type = "radio";
radioButton3.name = nameArg;
radioButton3.value = valueArg;
if (defaultArg3 == radioButton3.value)
radioButton3.checked = true;
radioCell3.appendChild(radioButton3);

newHTMLTableRow.appendChild(rowLabelCell);
newHTMLTableRow.appendChild(radioCell1);
newHTMLTableRow.appendChild(radioCell2);
newHTMLTableRow.appendChild(radioCell3);

 

[HugeBob]

HugeBobwrote:

...

This script works fine in Firefox. But, in IE it only works up> to a point.

...


rowLabelCell.className= "title";

Mick

Thanks! That worked. But, how do you get radio buttons to work in
DOM scripting? The following works in FF and doesn't in IE:

var radioCell1 = document.createElement("td");
var radioButton1 = document.createElement("input");
radioButton1.type = "radio";
radioButton1.name = "someName";
radioButton1.value = "someValue";
if (defaultArg1 == radioButton1.value)
radioButton1.checked = true;
radioCell1.appendChild(radioButton1);

The radio button is created and visible. But, when you click on them,
nothing happens: i.e., they don't hold a checked state. They don't
even go black. Can you suggest a good reference book for this?

 

[SAM]

HugeBob a écrit :

The following works in FF and doesn't in IE:

var radioCell1 = document.createElement("td");
var radioButton1 = document.createElement("input");
radioButton1.type = "radio";

that here doesn't work in my IE Mac ('type' is reserved :-( )

radioButton1.name = "someName";
radioButton1.value = "someValue";
if (defaultArg1 == radioButton1.value)
radioButton1.checked = true;

here you must append the td, then append ist content (I belive)

radioCell1.appendChild(radioButton1);

The radio button is created and visible. But, when you click on them,
nothing happens: i.e., they don't hold a checked state. They don't
even go black. Can you suggest a good reference book for this?

perhaps also change the order :

var radioCell1 = document.createElement("td");
var radioButton1 = document.createElement("input");
radioButton1.type = "radio";

// supposing myTbody.myRow is the targeted TR
myTbody.myRow.appendChild(radioCell1);

radioCell1.appendChild(radioButton1);
radioButton1.name = "someName";
radioButton1.value = "someValue";
if (defaultArg1 == radioButton1.value)
radioButton1.checked = true;

 

[mmurph211]

HugeBob a écrit :



that here doesn't work in my IE Mac ('type' is reserved :-( )


here you must append the td, then append ist content (I belive)



perhaps also change the order :

var radioCell1 = document.createElement("td");
var radioButton1 = document.createElement("input");
radioButton1.type = "radio";

// supposing myTbody.myRow is the targeted TR
myTbody.myRow.appendChild(radioCell1);

radioCell1.appendChild(radioButton1);
radioButton1.name = "someName";
radioButton1.value = "someValue";
if (defaultArg1 == radioButton1.value)
radioButton1.checked = true;

There's still work needed for this script, but it creates radio
buttons using createElement() in IE that work:

http://www.matts411.com/webdev/creating_form_elements_with_javascript

 

[David Mark]

HugeBob a écrit :



that here doesn't work in my IE Mac ('type' is reserved :-( )


here you must append the td, then append ist content (I belive)



perhaps also change the order  :

var radioCell1 = document.createElement("td");
var radioButton1 = document.createElement("input");
radioButton1.type = "radio";

// supposing myTbody.myRow is the targeted TR
myTbody.myRow.appendChild(radioCell1);

radioCell1.appendChild(radioButton1);
radioButton1.name = "someName";
radioButton1.value = "someValue";
if (defaultArg1 == radioButton1.value)
     radioButton1.checked = true;

Order is everything when creating radio buttons in IE. The type is
assigned after the name and only after the element has been appended
to a parent element. Then they will work and show up in the elements
collection of the form.

 

[HugeBob]

Order is everything when creating radio buttons in IE. The type is
assigned after the name and only after the element has been appended
to a parent element. Then they will work and show up in the elements
collection of the form.

Hi All,

Thanks for your suggestions. I tried two methods:

Method 1:

newHTMLTableRow.appendChild(rowLabelCell);
var radioCell1 = document.createElement("td");
var radioButton1 = document.createElement("input");
radioButton1.name = nameArg;
radioButton1.type = "radio";
radioCell1.appendChild(radioButton1);
newHTMLTableRow.appendChild(radioCell1);
radioCell1.align = "center";
radioButton1.value = valueArg;
if (defaultArg1 == radioButton1.value)
radioButton1.checked = true;

Method II:

newHTMLTableRow.appendChild(rowLabelCell);
var radioCell1 = document.createElement("td");
var radioButton1 = document.createElement("input");
radioButton1.name = nameArg;
newHTMLTableRow.appendChild(radioCell1);
radioButton1.type = "radio";
radioCell1.appendChild(radioButton1);
radioCell1.align = "center";
radioButton1.value = valueArg;
if (defaultArg1 == radioButton1.value)
radioButton1.checked = true;

Now the radio buttons are holding their *.checked values. But, I'm
still not able to alter their states manually.

 

[David Mark]

Hi All,

Thanks for your suggestions.  I tried two methods:

Method 1:

newHTMLTableRow.appendChild(rowLabelCell);
var radioCell1 = document.createElement("td");
var radioButton1 = document.createElement("input");
radioButton1.name = nameArg;
radioButton1.type = "radio";
radioCell1.appendChild(radioButton1);
newHTMLTableRow.appendChild(radioCell1);
radioCell1.align = "center";
radioButton1.value = valueArg;
if (defaultArg1 == radioButton1.value)
    radioButton1.checked = true;

Method II:

newHTMLTableRow.appendChild(rowLabelCell);
var radioCell1 = document.createElement("td");
var radioButton1 = document.createElement("input");
radioButton1.name = nameArg;
newHTMLTableRow.appendChild(radioCell1);
radioButton1.type = "radio";
radioCell1.appendChild(radioButton1);
radioCell1.align = "center";
radioButton1.value = valueArg;
if (defaultArg1 == radioButton1.value)
    radioButton1.checked = true;

Now the radio buttons are holding their *.checked values.  But, I'm
still not able to alter their states manually.

Neither method is correct. As I mentioned, you must append the radio
button to an element before naming it and setting its type. Try this:

...
var radioButton1 = document.createElement("input");
radioCell1.appendChild(radioButton1);
radioButton1.name = nameArg;
radioButton1.type = "radio";
newHTMLTableRow.appendChild(radioCell1);
...

 

[HugeBob]

Neither method is correct. As I mentioned, you must append theradio
button to an element before naming it and setting its type. Try this:

...
var radioButton1 = document.createElement("input");
radioCell1.appendChild(radioButton1);
radioButton1.name = nameArg;
radioButton1.type = "radio";
newHTMLTableRow.appendChild(radioCell1);
...

Davide,

Here's what I tried:

var ratingCell1 = document.createElement("td");
var radioRating1 = document.createElement("input");
ratingCell1.appendChild(radioRating1);
radioRating1.name = nameArg;
radioRating1.type = "radio";
newHtmlTableRow.appendChild(ratingCell1);
ratingCell1.align = "center";
radioRating1.value = "1";
if (defaultRating == radioRating1.value)
radioRating1.checked = true;

I, now, seem to be getting an error on trying to set the type
(radioRating1.type = "radio"). The exception generated was "Could not
get the type property. This command is not supported." If I comment
out that line, I get text boxes which seems to be the default type. I
Googled around and found this site:
http://cf-bill.blogspot.com/2006/03/another-ie-gotcha-dynamiclly-created.html.
LOL, IE is truly a pain. But, at least this works. Here's what I had
to do:


var ratingCell1 = document.createElement("td");
var radioRating1
try {
/* Completely ridiculous. But, this is what IE wants
**********************************************/
var radioHTML = '<input type="radio" name="' + nameArg + '" /

';

radioRating1 = document.createElement(radioHTML);
/
************************************************************************************************/
ratingCell1.appendChild(radioRating1);
}
catch (e)
{
radioRating1 = document.createElement("input");
ratingCell1.appendChild(radioRating1);
radioRating1.name = nameArg;
radioRating1.type = "radio";
}

newHtmlTableRow.appendChild(ratingCell1);
ratingCell1.align = "center";
radioRating1.value = "1";
if (defaultRating == radioRating1.value)
radioRating1.checked = true;

 

[David Mark]

Davide,

Here's what I tried:

var ratingCell1 = document.createElement("td");
var radioRating1 = document.createElement("input");
ratingCell1.appendChild(radioRating1);
radioRating1.name = nameArg;
radioRating1.type = "radio";

IIRC, you have to do some odd outerHTML manipulation to safely set the
name and type properties so that the input shows up in the elements
collection and radio buttons actually work. I was thinking that step
was only needed for elements that had their type already set. I have
tried to forget about this mess, since I have the logic encapsulated
in an (ugly) setAttribute wrapper. As long as I set the name
attribute first, it works for all input types.

newHtmlTableRow.appendChild(ratingCell1);
ratingCell1.align = "center";
radioRating1.value = "1";
if (defaultRating == radioRating1.value)
    radioRating1.checked = true;

I, now, seem to be getting an error on trying to set the type
(radioRating1.type = "radio").  The exception generated was "Could not
get the type property.  This command is not supported."  If I comment

Yes, as soon as you set the name property, IE thinks the type is
specified (or something like that.)

out that line, I get text boxes which seems to be the default type.  I
Right.

Googled around and found this site:http://cf-bill.blogspot.com/2006/03/another-ie-gotcha-dynamiclly-crea....
LOL, IE is truly a pain.  But, at least this works.  Here's what I had
to do:

var ratingCell1 = document.createElement("td");
var radioRating1
try {
        /* Completely ridiculous.  But, this is what IE wants
**********************************************/
        var radioHTML = '<input type="radio" name="' + nameArg + '" />';

        radioRating1 = document.createElement(radioHTML);

This looks like a similar variation of what I did. You can leave off
the slash at the end (IE will throw it away anyway.) Also, I wonder
if this solution makes the element show up in the form's elements
collection.

 

[HugeBob]

This looks like a similar variation of what I did. You can leave off
the slash at the end (IE will throw it away anyway.) Also, I wonder
if this solution makes the element show up in the form's elements
collection.

I don't think it does. But, I'll check. When the radio buttons were
showing up inactive, elements[] didn't seem to have them listed.
Well, when I tried *.elements['name'].whatever, it didn't seem to
work. But, now that I have the radios working, I'll give it a try
again. Thanks for you help.