Currently, I have JSON and AJAX code that fetches XML data every second, which is working smoothly. When I added an XML element, it automatically gets added to an HTML table. The issue arises when I call the function every 3 seconds; the page refreshes due to new elements being added to the table, causing an annoying viewing experience with the page refreshing constantly. To combat this, I want the code to trigger only once when a new element is added and update the table accordingly. This is for a customer info screen in a self-service cafe program, where any newly added items by the seller should reflect on the customer monitor.
<script>
$(document).ready(function() {
setInterval(function() {
$('#tableBody').empty();
// ajax call to load XML and parse it
$.ajax({
type: 'GET',
url: '01.xml',
dataType: 'xml',
success: function(xml) {
$(xml).find('dsname').each(function() {
$('#tableBody').append(
'<tr>' +
'<td>' +
$(this).find('STOKADI').text() + '</td> ' +
'<td>' +
$(this).find('BORC').text() +'₺'+ '</td> ' +
'</tr>');
});
}
});
}, 3000);
});
</script>My XML data when sellers try to sell something:
My XML data when the sell menu is empty:
I wish to implement a function that checks for newly added elements in the XML file and then triggers the necessary action.
Edit my page for nick:
<html>
<head>
<meta charset="UTF-8">
<title>Customer Screen</title>
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="plugins/datatables/dataTables.bootstrap.css" rel="stylesheet" type="text/css" />
<link href="dist/css/pageDesign.min.css" rel="stylesheet" type="text/css" />
<script src="plugins/jQuery/jQuery-2.1.4.min.js" type="text/javascript"></script>
</head>
<body>
<table class='table table-bordered table-striped datatable'>
<thead style='background:#999900;'>
<tr>
<th>SIRA</th>
<th>ÜRÜN</th>
<th>FİYAT</th>
</tr>
</thead>
<tbody id="tableBody">
</tbody>
</table>
<img src="1.png" style="width: 250px; height: 250px; margin-left: 800px">
</body>
</html>