AJAX and adding row to table

Discussion in 'Web Design and Development' started by yg17, Jun 11, 2006.

  1. yg17 macrumors G5

    yg17

    Joined:
    Aug 1, 2004
    Location:
    St. Louis, MO
    #1
    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
     
  2. angelneo macrumors 68000

    Joined:
    Jun 13, 2004
    Location:
    afk
    #2
    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.
     
  3. Thom_Edwards macrumors regular

    Joined:
    Apr 11, 2003
    #3
    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.
     
  4. yg17 thread starter macrumors G5

    yg17

    Joined:
    Aug 1, 2004
    Location:
    St. Louis, MO
    #4
    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.
     

Share This Page