Refresh php with jquery and reload image

Question

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>

What does oggi1ora.php return to the Ajax call? Whatever it returns is being put into the top div - I don't see any code which would change the image in the page body. — Duncan Cowan
– Duncan Cowan, Commented Jun 24, 2015 at 8:55
Your markup is wierd / malformed and has <div> tags outside of the <body> ... Probably not related to your issue, but still... — EJTH
– EJTH, Commented Jun 24, 2015 at 8:59
Add ?timestamp to your image on every refresh to force the browser to reload the image — Bugfixer
– Bugfixer, Commented Jun 24, 2015 at 9:00

Drakes · Accepted Answer · 2015-06-24 09:23:37Z

3

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.

edited Jun 24, 2015 at 9:23

answered Jun 24, 2015 at 8:57

Drakes

23.8k3 gold badges58 silver badges97 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Ole Spaarmann Over a year ago

It might also be neccessary to add the random number to the image URL in the src attribute, if this is the content that changes. An even better way to generate the number is to use a timestampt like so: var version = new Date().getTime();

Drakes Over a year ago

@ØleBjarnstroem Agreed. And thanks. I like your getTime() better. I've added code to refresh his image with the timestamp as well.

Ole Spaarmann Over a year ago

The headers are a good point. But they have to be set in the script that generates the image as well. If it is just a static file then this has to be configured in the webserver and this is not a good idea. I guess OPs problem is rather that the webpage is always reloaded properly but the image inside isn't (because cache) and that's what needs to change.

Drakes Over a year ago

That's a good point. Let's see how he makes out with this first before we update his server config files. ;)

Ole Spaarmann Over a year ago

Also maybe think about naming your scripts in a way that actually makes sense and that other devs are understanding. If you worked in a team and had 3 scripts that do something different but have the same name and are stored in different folders it would make people hate you...

|

Collectives™ on Stack Overflow

Refresh php with jquery and reload image

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related