Question

I have a php script that randomly generates an image. Something like this:

<?php
$image = imagecreatetruecolor(400,200);

// process image

// rendering image
header("Content-type: image/jpeg");
imagejpeg($image);
?>

My html looks like this:

<img id="image" src="/models/plugins/image.php"/>
<button id="button">Get new image</button></body>

Then I have a jquery file that handles the click to the button, so that a new random image is loaded when the button is clicked:

$(function(){
    $('#button').click(function(){
        $.ajax({
            url: 'models/plugins/image.php',
            success: function(data){
                $('#image').html('<img src="' + data + '">')
            }
        })
    })
})

I use firebug, I can see that request is actually sent and that the response is received successfully, but the image does not change.

What am I doing wrong and how can I fix this?

Answer 1

I added another answer because I think that none of the previous answers solved the problem. I think, the only thing the OP wanted was to update(!) the image when the button is clicked. So there is no need for an Ajax request, just reload the image. And you can enforce that by appending a random query string to the image’s src attribute.

$('#button').click(function() {
    var $image = $('#image');
    var plainSrc = $image.attr('src').split("?")[0];  // disregard previous query string
    $image.attr('src', plainSrc + "?" + (new Date().getTime()));
});