Automatic update with AJAX / JSON
I'm a little lost at the moment as my code seems to work, but my table is not interested. XD
I am loading data from my db into a table and I want it to update automatically every three seconds. My JSON data is correct and js-console displays updated data. But my table doesn't want to display it, so I need to refresh the whole page. However, this is not what I want to do.
Here is my code (HTML + JS):
<script>
$(document).ready(function() {
setInterval(function() {``
$.ajax({
url: "myStuff.php",
success: function(data) {
console.log(data);
myRecords = $.parseJSON(data);
$("#dynatable").dynatable({
dataset: {
records: myRecords
}
});
}
});
}, 3000);
});
<table id="dynatable">
<thead>
<th>test1</th>
<th>test2</th>
</thead>
<tbody>
</tbody>
</table>
PHP:
$response = array();
while ($zeile = mysqli_fetch_array($db_erg, MYSQL_ASSOC)) {
$response [] = array(
"test1" => $zeile['wasd'],
"test2" => $zeile['wasdf']
);
}
echo json_encode($response);
When I add data to my database the returned JSON data is updated, I can see this in the js console. The problem is my table doesn't want to display it, it just shows the "old" data.
Any suggestions for solving this problem?
-------------------------------------------- ------ -----------
EDIT:
I got it now! This helped me solve my problem. Thanks for the help! :) Here is my code:
$(document).ready(function() {
setInterval(function() {
$.ajax({
url: "myStuff.php",
success: function(data) {
console.log(data);
var myRecords = $.parseJSON(data);
var dynatable = $('#dynatable').dynatable({
dataset: {
records: myRecords
}
}).data('dynatable');
dynatable.settings.dataset.originalRecords = myRecords;
dynatable.process();
}
});
}, 3000);
});
source to share
this code can also update the table.
<script>
$(document).ready(function() {
var mytable = $("#dynatable");
setInterval(function() {
$.ajax({
url: "do.php",
success: function(data) {
myRecords = $.parseJSON(data);
mytable.dynatable({
dataset: {
records: myRecords
}
});
mytable.data('dynatable').settings.dataset.records = myRecords;
mytable.data('dynatable').dom.update();
console.log(data);
}
});
},
1000);
});
</script>
source to share