aarc aarc - 5 months ago 12
jQuery Question

Ajax create new DIV instead of refresh

I have a problem with this code :

<!DOCTYPE HTML>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>

(function update() {
$.ajax({
type: 'GET',
url: "http://192.168.4.2/home/api/stato/ambiente/living",
dataType: "json",
success: renderList
}).then(function() {
setTimeout(update, 200);
});
})();

function renderList(data) {
var list = data == null ? [] : (data instanceof Array ? data : [data]);
$.each(list, function(index, data) {
if (data.stato ==1) {
$('#statoList').append('<div>'+ data.ID + " " + data.descrizione + " <img src=img/lamp_on.png " + '</div>');
$('#Switch').append('<button type="button">' + " OFF " + '</button>');
}
else {
$('#statoList').append('<div>'+ data.ID + " " + data.descrizione + " <img src=img/lamp_off.png " + '</div>');
$('#Switch').append('<button type="button">' + " ON " + '</button>');
}
});
}
</script>
</head>
<body>

<div id="statoList"></div>
<div id="Switch"></div>

</body>

</html>


I wish to execute a DIV refresh every 200 ms but the problem is that each time creates a new DIV below the previous one.

How can I solve this?

Thank you.

Answer

If there are more than one of each type empty() the containers before appending

 $('#statoList').empty();
 $.each(list, function(index, data) {
       if (data.stato ==1) {...