AJAX and adding row to table

yg17

macrumors G5
Original poster
Aug 1, 2004
14,910
2,480
St. Louis, MO
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:

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

macrumors 68000
Jun 13, 2004
1,541
0
afk
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

macrumors regular
Apr 11, 2003
240
0
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

macrumors G5
Original poster
Aug 1, 2004
14,910
2,480
St. Louis, MO
Thom_Edwards said:
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:

Code:
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.