CODEWITHSUNDEEP
javascriptphpjquery
eliafino
eliafino

Reputation: 96

Refresh php with jquery and reload image

I have this php page /var/www/oggi1ora.php.

First I need to execute the page /usr/local/bin/oggi1ora.php to generate chart.

Every 5 seconds the php script is executing correctly, but image in the page is not refreshing... how can i resolve this?

I need execute every 5 secs /usr/local/bin/oggi1ora.php. The script generate image stored 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>

Upvotes: 3

Views: 873

Answers (1)

Drakes
Drakes

Reputation: 23670

You may have a browser caching issue. One solution is to append a timestamp to the URL to ensure the latest version is fetched. Either that or set server-side headers to not cache. For the former 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 set 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");

Next, jQuery(".result").html(results) is probably not doing anything since there is no element with class "result" in your markup.

Instead, ignore the result and force the image to refresh 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 too, then either include '/usr/local/bin/oggi1ora.php' (or however your directory structure is set) or add exec('php -q /usr/local/bin/oggi1ora.php') in your web-facing /var/www/oggi1ora.php script.

Upvotes: 3

Related Questions