innerHTML works in Firefox but not in IE

[obiron]

Hi guys,

first posting here so I hope you can help me. The following code works in Firefox (it is called from an onClick event in a DIV). Basically it finds the last row of a TBODY by finding lastChild, strips out the row number which is held as innerHTML on the first TD and adds a new row at the end of the table.

It works just fine in firefox but errors on the line where I set the innerHTML of the new last child in IE6.

If it helps, the code is generated by PHP using MVC model in CodeIgniter.

Why does it fail in IE6 and what do I need to do to fix it.

Do I need to be aware of any other browsers that may cause it to fall over.

Is there a debug tool like firebug for IE?


function fn_addRecord()
{
alert('hello');
var parentnode = document.getElementById(\"resultsTbody\");
var lastchildnode = parentnode.lastChild; // last record of the results form
alert (lastchildnode.firstChild.innerHTML); // holds the position of the last field
var nextposition = parseInt(lastchildnode.firstChild.innerHTML) + 1;
alert (nextposition);
var inserttext = '<TD>' + nextposition + '</TD><TD><input type=\"text\" name=\"name_' + nextposition +'\" id=\"name_'+ nextposition +'\" size=20 onkeyup=\"fn_getCustomerInfo('+ nextposition +');\"/><input type=\"text\" name = \"Pos_' + nextposition + '\" id=\"Pos_' + nextposition + '\" value=\"\"\>';
inserttext = inserttext + '<TD><input name =\"M_' + nextposition +'\" type =\"checkbox\"></TD><TD><input name =\"S_' + nextposition +'\" type =\"checkbox\"></TD><TD><input name=\"D_' + nextposition +'\" type=\"checkbox\"></TD><TD><input name=\"H_' + nextposition +'\" type=\"checkbox\"></TD><TD><input name=\"C_' + nextposition +'\" type=\"checkbox\"></TD></TD></TR>';
alert (inserttext);
var theNewParagraph = document.createElement('TR');
theNewParagraph.name = '\"row_' + nextposition + '\"';
parentnode.appendChild(theNewParagraph);
alert (parentnode.lastChild.name);
parentnode.lastChild.innerHTML = inserttext;
alert(parentnode.lastChild.innerHTML);

FYI, the relevant html code looks like this

<A class="clicklink" name="AddOne" id="AddOne" onClick="fn_addRecord();">click here to add another record</A><BR><FORM><TABLE name="resultsTable" id="resultsTable"><TBODY name="resultsTbody" id="resultsTbody"><TR><TD name="PosnHdr">Position</TD><TD>Player</TD><TD>M-Card</TD><TD>S-glasses</TD><TD>Dealer</TD><TD>Hat</TD><TD>Cigar</TD></TR><TR name="row_1" id="row_1"><TD>1</TD><TD><input type="text" name = "name_1" id = "name_1" size=20 onkeyup="fn_getCustomerInfo(1);"/><input type="text" name = "Pos_1" id="Pos_1" value="">

<TD><input name = M_1 type = checkbox></TD>
<TD><input name = S_1 type = checkbox></TD>
<TD><input name = D_1 type = checkbox></TD>
<TD><input name = H_1 type = checkbox></TD>
<TD><input name = C_1 type = checkbox></TD></TD></TR><TR name="row_2" id="row_2"><TD>2</TD><TD><input type="text" name = "name_2" id = "name_2" size=20 onkeyup="fn_getCustomerInfo(2);"/><input type="text" name = "Pos_2" id="Pos_2" value="">
<TD><input name = M_2 type = checkbox></TD>
<TD><input name = S_2 type = checkbox></TD>
<TD><input name = D_2 type = checkbox></TD>

<TD><input name = H_2 type = checkbox></TD>
<TD><input name = C_2 type = checkbox></TD></TD></TR><TR name="row_3" id="row_3"><TD>3</TD><TD><input type="text" name = "name_3" id = "name_3" size=20 onkeyup="fn_getCustomerInfo(3);"/><input type="text" name = "Pos_3" id="Pos_3" value="">
<TD><input name = M_3 type = checkbox></TD>
<TD><input name = S_3 type = checkbox></TD>
<TD><input name = D_3 type = checkbox></TD>
<TD><input name = H_3 type = checkbox></TD>
<TD><input name = C_3 type = checkbox></TD></TD></TR><TR name="row_4" id="row_4"><TD>4</TD><TD><input type="text" name = "name_4" id = "name_4" size=20 onkeyup="fn_getCustomerInfo(4);"/><input type="text" name = "Pos_4" id="Pos_4" value="">
<TD><input name = M_4 type = checkbox></TD>

<TD><input name = S_4 type = checkbox></TD>
<TD><input name = D_4 type = checkbox></TD>
<TD><input name = H_4 type = checkbox></TD>
<TD><input name = C_4 type = checkbox></TD></TD></TR><TR name="row_5" id="row_5"><TD>5</TD><TD><input type="text" name = "name_5" id = "name_5" size=20 onkeyup="fn_getCustomerInfo(5);"/><input type="text" name = "Pos_5" id="Pos_5" value="">
<TD><input name = M_5 type = checkbox></TD>
<TD><input name = S_5 type = checkbox></TD>
<TD><input name = D_5 type = checkbox></TD>
<TD><input name = H_5 type = checkbox></TD>

<TD><input name = C_5 type = checkbox></TD></TD></TR></TBODY></TABLE><BR><input type = submit value = finished></form>

[rays]

I had been using Microsoft Visual Studio and IE for JavaScript debugging .. but since firefox i hav't used either

[obiron]

Gave up and am now using document.createElement to build the html and it seems to work in both browsers.

DOM looks like

TABLE
>TBODY
>>TR
>>>TD
>>>>INPUT
>>>TD
>>>>INPUT
>>TR
>>>TD
>>>>INPUT
>>>TD
>>>>INPUT

So we create a new element
var newElement = document.createElement('TR')
and append it to the end of the TBODY using
document.getElementByID('tbodyID').appendchild(newElement)
so we now have an empty TR tag at the end of the table body and we have to fill this first with a TD and then fill the TD with an INPUT. In the code below I have already set newRow to the newly created lastChild element and defined newElement as a variable. nextposition is a counter which is used to identify the row for both javascript and $_POST (I know I could just use arrays, but I find it easier to discreetly name them)

newElement = document.createElement('TD'); // TD for name
newElement.value = nextposition;
newRow.appendChild(newElement); //TD for name

newElement = document.createElement('input'); // input for name
newElement.type = 'text';
newElement.name = 'name_' + nextposition;
newElement.id = 'name_' + nextposition;
newElement.size = 20;
newElement.onkeyup = function(){fn_getCustomerInfo(nextposition);};
newRow.lastChild.appendChild(newElement); //input for name

which has nested the INPUT inside the TD inside the TR

The last complication is that the INPUT needs to take an event handler so that the Ajax calls will work on the new element. You have to declare this as an anonymous function function() and then state the function and the arguments after it in curly braces.

ALL BECAUSE PIGGING IE WONT DO INNERHTML PROPERLY.

I am still having problems getting the $_POST array on form submit to work but I think that is a DOM problem rather than a JS problem (i.e. it doesn;t think that the input fields are part of the form)