Question

$(document).ready(function(){
      setInterval(function(){
         $.ajax({ url: "getLiveData.php",
             success: function(result){
                 $.each(result, function(i, result){
                    var t = $("table#insideTable");
                    t.append('<tr><td>' + result.carNo + '</td><td>' +
                             result.carSpeed + '</td></tr>');
                    });
             }, 
             dataType: "json"
          });
      }, 600000);
});

Hello, I was trying to use the code above to update car speeds for every 10 mins.

–data at 10:20AM—–

+-------+-------+
|car    |speed  |
+-------+-------+
|1      |170 kph|
+-------+-------+
|2      |150 kph|
+-------+-------+
|3      |190 kph|
+-------+-------+

–data at 10:30AM—–

+-------+-------+
|car    |speed  |
+-------+-------+
|1      |180 kph|
+-------+-------+
|2      |155 kph|
+-------+-------+
|3      |174 kph|
+-------+-------+

However, after running the code, the results obtained from the two time points are all shown, with one after the other (See below).

+-------+-------+
|car    |speed  |
+-------+-------+
|1      |170 kph|
+-------+-------+
|2      |150 kph|
+-------+-------+
|3      |190 kph|
+-------+-------+
|1      |180 kph|
+-------+-------+
|2      |155 kph|
+-------+-------+
|3      |174 kph|
+-------+-------+

What I really want is to have the new data from a later time to replace the current one.

+-------+-------+
|car    |speed  |
+-------+-------+
|1      |180 kph|
+-------+-------+
|2      |155 kph|
+-------+-------+
|3      |174 kph|
+-------+-------+

Can anyone help me?

Many thanks!

Answer 1

You want to use the .html() function in place of .append():

Change:

success: function(result){
    $.each(result, function(i, result){
        var t = $("table#insideTable");
        t.append('<tr><td>' + result.carNo + '</td><td>' + result.carSpeed + '</td></tr>');
    });
}

To:

success: function(result){

    //create an output variable that will be added to the DOM when we're finished
    var output = '';

    //iterate through the results of the AJAX request
    $.each(result, function(i, result){

        //add a row to the output variable
        output += '<tr><td>' + result.carNo + '</td><td>' + result.carSpeed + '</td></tr>';
    });

    //add the output to the DOM, notice that since we are only adding nodes to the DOM once this creates less CPU overhead than appending each row separately (we also save overhead by not selecting the table element during each iteration of the $.each() loop)
    $("#insideTable").html(output);
}

Which will replace the HTML inside the table element rather than append to it. Here is a demonstration of using .html() versus .append(): http://jsfiddle.net/jasper/TKaVF/

Here is the documentation for .html(): http://api.jquery.com/html

On a side-note, it doesn’t make your selector any faster by adding table since you are looking-up an ID (which is quite fast on its own).

var t = $("table#insideTable");

Would be faster as:

var t = $("#insideTable");