I have a website that gets data from a MySQL database (using PHP) and dynamically creates divs for each row to display the data. The section of the webpage that displays the data is refreshed every few seconds (by removing all the divs, going to the database again, and recreating them). The data retrieved from the database is correct the first time the page loads, but, if a change is made to the data afterwards, this change is not reflected on the page when the displaying section reloads. If the entire page is manually refreshed, the data retrieved is correct.
I have narrowed the source of the problem down to the php code handling the db connection and data selection and have tried clearing the browser cache. The code in question is below:
<?php
function disableCache(){
header("Cache-Control: no-store, no-cache, must-revalidate, max-age=0");
header("Cache-Control: post-check=0, pre-check=0", false);
header("Pragma: no-cache");
}
function reloadQueue(){
$dsn = 'mysql:host=db4free.net;dbname=myDB';
$user = 'username';
$password = 'password';
$conn = new PDO($dsn, $user, $password);
$sql = 'SELECT SQL_NO_CACHE msgId, msg, msgTime, status FROM MsgTable';
foreach($conn->query($sql) as $row){
$msgId = $row["msgId"];
$msg = $row["msg"];
$time = $row["msgTime"];
$status = $row["status"];
echo 'addToQueue("' . $msgId . '","' . $msg . '","' . $time . '","' . $status . '"); ';
}
$conn = null; //close connection
}
?>
And here is the script that calls the php function:
<script>
function onLoad(){
<?php disableCache() ?>
<?php reloadQueue() ?>
//reload every 15 seconds
setInterval(function(){
$("#queue").empty();
<?php reloadQueue() ?>
}, 15000);
}
</script>