Update php with jquery and reload the image
I have this php page /var/www/oggi1ora.php
.
First I need to execute a page /usr/local/bin/oggi1ora.php
to create a diagram.
Every 5 seconds a PHP script is executed, but the image on the page is not refreshing ... how can I solve this?
I need to run every 5 seconds /usr/local/bin/oggi1ora.php
. The script will generate the image saved in /var/www/grafici/oggi1ora.png
.
<div class="result">
<?php exec('php -q /usr/local/bin/oggi1ora.php'); ?>
</div>
<div class="oggi1ora">
<html>
<body>
<img src="grafici/oggi1ora.png" id="oggi1ora" border="0" />
</body>
</html>
</div>
<script type="text/javascript" src="jquery-1.11.2.min.js"></script>
<script>
function refresh_div() {
jQuery.ajax({
url:'oggi1ora.php',
type:'POST',
success:function(results) {
jQuery(".result").html(results);
}
});
}
t = setInterval(refresh_div,5000);
</script>
This is new /var/www/oggi1ora.php
<div class="result">
<?php
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");
include('/usr/local/bin/oggi1ora.php');
?>
</div>
<div class="oggi1ora">
<html>
<img src="grafici/oggi1ora.png" id="oggi1ora" border="0" />
</html>
</div>
<script type="text/javascript" src="jquery-1.11.2.min.js"></script>
<script>
function refresh_div() {
var d = new Date().getTime();
jQuery.ajax({
url:'oggi1ora.php?ts=' + d,
type:'POST',
success:function(results) {
$("#oggi1ora").attr("src", "grafici/oggi1ora.png?ts=" + d);
}
});
}
t = setInterval(refresh_div,5000);
</script>
source to share
Possibly a browser caching issue. One solution is to add a timestamp to the url to ensure you get the latest version. Either that, or set the headers on the server side to avoid caching. For the first solution, you can try this:
function refresh_div() {
var d = new Date().getTime();
jQuery.ajax({
url:'oggi1ora.php?ts=' + d,
type:'POST',
// rest of your code
For the latter, you can customize headers like this:
<?php
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");
Further, jQuery(".result").html(results)
it probably does nothing, since there is no element with the "result" of the class in your markup.
Instead, ignore the result and force the image to update like so:
function refresh_div() {
var d = new Date().getTime();
jQuery.ajax({
url:'oggi1ora.php?ts=' + d,
type:'POST',
success:function(results) {
$("#oggi1ora").attr("src", "grafici/oggi1ora.png?ts=" + d);
}
});
}
Update: If you want to call /usr/local/bin/oggi1ora.php
every 5 seconds, then either include '/usr/local/bin/oggi1ora.php'
(or your directory structure is set up anyway) or add exec('php -q /usr/local/bin/oggi1ora.php')
a /var/www/oggi1ora.php
script to your web interface .
source to share