0

I have a PHP script that creates and image using the imagick PHP extension. I display the image on page load like so:

<img id="myImage" src="php/image-script.php" />

The PHP script ends by echoing the imagick image object that is built in the script:

echo 'myImage';

This all works fine on page load. I have now added a jQuery AJAX request which is fired when tabbing out of an input box. The value of the input box is then passed through to the image-script.php via a query string like so:

    $('#inputHeight').on('blur', function(){

    var $height = $('#inputHeight').val(); 

        $.ajax({ url: './php/preview-image.php?h=' + $height,
             type: 'post',
             success: function(output) {
                $('#preview').attr('src', output);             
             }

        });

    });

My problem comes in the success function of the AJAX request. Currently i'm updating the img src attribute with the output (as above). This is simply writing the raw string value of the image into the attribute and it is not updating. How would I go about updating the image correctly?

Ronnie
  • 1,053
  • 5
  • 18
  • 30
  • are you sure that success calback really executes? did you put a break point there to see what's the `output`? If yes - what's the output returned? – Reflective Oct 27 '12 at 22:57
  • I checked out the response using Chrome deve tools and it is a long string of jumbled characters and question marks (I presume the raw image). This is also what is inserted into the img src tag. – Ronnie Oct 27 '12 at 23:01
  • Just a note, the imagick object that is created is never saved off, it is simply echoed after it has been built in the script, which works fine on the page load. – Ronnie Oct 27 '12 at 23:02
  • Is your question not about refreshing the content? http://stackoverflow.com/questions/1997901/how-to-refresh-the-src-of-img-with-jquery – Hauns TM Oct 27 '12 at 23:06
  • I don't believe so, the problem I have is that the 'output' is the raw image string, I am updating the src attribute with this. This isn't working so I am wondering how to update the image with this particular output. – Ronnie Oct 27 '12 at 23:17
  • Thanks Hauns, I updated to script to include the refresh as you pointed out and it seems to work. I'm unsure if my process is correct though as I am calling the preview-image.php script twice? My new script is posted below. – Ronnie Oct 27 '12 at 23:20
  • The problem is that your web browser is caching its' content. I think. :-) – Hauns TM Oct 27 '12 at 23:26
  • Thanks Hauns, if you look at my answer below, am I using the correct code pattern in that I specify the URL and then on success I revisit the URL it seems inefficient? – Ronnie Oct 27 '12 at 23:29

2 Answers2

0

I have found a solution, although I'm not sure it is completely correct as I appear to be calling my preview-image.php script twice? Firstly in the URL and then in the Success function. Here is the updated code:

$('#inputHeight').on('blur', function(){

    var $width = 550;
    var $height = $('#inputHeight').val(); 

        $.ajax({ url: './php/preview-image.php?w=' + $width + '&h=' + $height,
             type: 'post',
             success: function(output) {
                $('#preview').attr('src', 'php/preview-image.php?w=' + $width + '&h=' + $height + '&' + Math.random());             
             }
    });

});
Ronnie
  • 1,053
  • 5
  • 18
  • 30
0

This worked for me to avoid calling your-imagick.php twice:

function getLatestImage() { 
$('#displayed').attr('src', 'your-imagick.php' + '?_=' + new    Date().getTime());
}
user1218172
  • 193
  • 1
  • 12