user2718017 user2718017 - 1 year ago 66
Ajax Question

AJAX Table refresh with JQUERY

I want to refresh a table, filled with JSON data, for example every 5 Seconds.

The table should be refreshed without a complete site refresh. New items should be added, lost items should be deleted. How do I refresh it now with AJAX?

<!DOCTYPE html>
<html>
<head>
<title>test</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<table face="comic sans ms" border="1" id="usertable"></table>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
$.getJSON('./url.php', function(data) {
var cars = data.rec.vehicles.vehicles;
$.each(cars, function(key, data){
console.log(data.carName);
var vint=data.vin;
var coopers="";
var tanken="";
var drive="MAN";
var fuelfarbe="#01DF3A";
var prozent="%";
var v=vint.substring(3,7);
if(v=="SX31"){coopers=" S";}
if(v=="SW71"){coopers=" SD";}
if(data.auto=="Y"){drive="AUT";}
if(data.fuelState<=25){tanken="20 Freiminuten für Vollbetankung"; fuelfarbe="#FF4000";}
$('#usertable').append(
function() {
return "<tr>"+
"<td>"+data.carName+"</td>"+
"<td>"+data.model+coopers+"</td>"+
"<td>"+drive+"</td>"+
"<td>"+data.fuelState+prozent+"</td>"+
//"<td>"+data.address+"</td>"+
"<td>"+data.licensePlate+"</td>"+
"<td>"+tanken+"</td>"
"<tr>";
}
);
})
});
});
</script>
</body>
</html>

Answer Source

Keep the getJSON in a function

function dummy()
{
    $(function() {
        $.getJSON(
        "url",
        function(json){ });
    });
}

and

give

setInterval( dummy, 5000 );
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download