Difficulty Trying to Refresh Page with PHP - php

Question

With my limited HTML skills I've hacked together a crude bit of code to accomplish a simple task. I have a Raspberry Pi running an Apache webserver. On the Pi's monitor I need to display an image. Occasionally I will need to change that image remotely, switching between at most maybe a couple dozen images.
Right now in the same directory I have the image page, four .jpg files, and a 'chooser' page to select the image I want. I'm pulling this up on a different computer on the same network. The only way I could figure out how to pass the image I want was to write it to a text file. So the chooser page has a simple web form with some radio buttons and a submit button. You pick a number from 1 to 4, hit submit, and it simply writes that number to the text file. That part works.
The image page opens the text file, reads the number, and tacks it onto the img src tag. I made a simple loop that was refreshing the page every 5 seconds, and that worked fine. I could change the text file and a few seconds later the page would reload with the new image. Awesome.
So I tried to add a little extra code with the idea that instead of refreshing every 5 seconds, it would instead check every 5 seconds to see if the number in the text file was different.
Something about my code is janky, because the first time I load it nothing happens. The browser loading animation is going so I assume the code has started its loop, but if it got that far, why didn't it load the image first? It will churn along until I use the chooser page to change the text file. At that point, it will load the image, but it loads the number that was previously in the text file, not the current one. It works like this each time, always changing to the previous number, not the current one.
I'm sure it's something dumb that I don't understand because my coding skills suck. Anyone see the glaring error?
<?php
$file = fopen("hints.txt","r");
$theData = fread($file,2);
fclose($file);
?>
<img width=533 height=355 src="<?php echo $theData?>.jpg"><br>
<?php
do{
sleep(5);
$file2 = fopen("hints.txt","r");
$theData2 = fread($file2,2);
fclose($file2);
} while ($theData == $theData2);
header("Refresh:0");
?>

Answer 1

Echo a bit of javascript to do it, as I recall headers can only be used before content is put onto the page.
<?php echo "<script>window.location.reload();</script>"; ?>

Answer 2

Your php code is trying to generate a page for the browser, but because you have a loop inside, it will hang there until data changes
Instead, you should poll hints.txt file with javascript ajax requests and update img source from the client side. Something like:
<!-- load source first time from file with php -->
<img width=533 height=355 id="image" src="<?php echo $theData?>.jpg" />
<script type="javascript">
window.setInterval(function(){
//create ajax request object, not useful for IE
var xhttp = new XMLHttpRequest();
//you may want to change URL to this file
xhttp.open("GET", "hints.txt", true);
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
console.log(xhttp.responseText); //see what response was
//change image attribute
document.getElementById("image").src = xhttp.responseText + '.jpg';
}
};
xhttp.send();
//update every 5 sec
},5000);
</script>