AJAX and adding row to table

[yg17]

This is my first time working with AJAX. What I'm doing is submitting some data entered into a form to a PHP script, it gets added to a mySQL database, and then a new row needs to be added to a table with the data that's entered.

All of my XML request calls are correct, but I'm having problems with this bit of code:

function handleResponse() {
if(request.readyState == 4){
document.getElementById("entries").innerHTML = document.getElementById("entries").innerHTML+request.responseText;
}
}

"entries" is the name of a table, and the PHP script returns <tr>....</tr> as the responseText, so it should just add a <tr> to what's already there. This code works fine in Camino, Firefox and Safari. It works great. But I fired up my PC and tried it in IE6, and it didn't work, and IE gave me a very helpful JS error message: Unknown Error.

So, am I doing something wrong here? Is there another method I should be using to add a row? Thanks

 

[angelneo]

Just to check, Does your table contains the <tbody> tag?

Most of the time I manipulate the tags themselves like using "appendChild", "addAttribute", "createElement" so on. However, I got the say, IE6 is really outdated here.

 

[Thom_Edwards]

this is where javascript can become a scavenger hunt! i would try setting the original value of the table to a variable and the response.text to another, then set the value by concatenating the two variables. sounds silly, but i seem to remember having to do some black magic like that before.

i would also maybe try using a <div> to hold the table and updating the <div>'s innerHTML.

 

[yg17]

i would also maybe try using a <div> to hold the table and updating the <div>'s innerHTML.

Thanks for the idea. I ended up with something that seems to work in everything. It's not pretty, but:

function handleResponse() {
if(request.readyState == 4){
table = new String(document.getElementById("entrytable").innerHTML);
//table = table.replace(table, "</table>", request.responseText + "</table>");
table = table.substr(0, table.length-8);
table = table + request.responseText + '</table>';
document.getElementById("entrytable").innerHTML = table;
}
}

entrytable is a DIV with the table inside of it. I originally had the thought of replacing </table> with the response text, plus </table>. Worked great in everything, except for...you guessed it...IE. So now with the substr method, it works in everything. Again, it's not pretty, but it works.