Adding a row to a table dynamically

Question

$(document).ready(function(){
var refreshId = setInterval(function() {
 periodicRefresh();
}, 9000);
})

.

function periodicRefresh()
{
    $.ajax({
        type: 'GET',
        url: 'include/ajaxActions.php',
        data: "action=displayLastEvent",

        success: function(msg){
         var newid = $(msg).attr("id");
                    current = $("#list tr:first").get(0).id;
                    if(newid != currentfirstrow){
                        $("#list").prepend(msg);
             lastrow = current-19;
             $('#'+lastrow).remove();
                    }
        }
    });
}

Here is an example of what the table row looks like:

<tr id="5094"  style="background:White;">
  <td class="tdstd">
  </td>
</tr>

Answer 1

At first ids aren't allowed to be numbers. They should start with a letter, then followed by a number. So you need to follow a different naming convention for your ids.

I am not sure if that's what you are asking for, but you can get the id of the first row with something like this:

$("table tr:first").get(0).id

Answer 2

That's a little hard to answer, without knowing how the XML that is returned from "ajaxActions.php" and your AJAX call is formatted. Also, I'm assuming that "currentfirstrow" is a global javascript variable accessible inside any function?

function periodicRefresh()
{
    $.ajax({
        type: 'GET',
        url: 'include/ajaxActions.php',
        data: "action=displayLastEvent",

        success: function(xml){
      var newfirstrow = $(xml).find("name_of_xml_node_that_contains_newly_returned_id").text();
      if(newfirstrow != currentfirstrow){
       //do add new row()
      }
        },
}

Answer 3

Check this blog post. http://deostroll.spaces.live.com/blog/cns!428DAD5E3A907C31!259.entry