Change PHP genereted image with jQuery - php

Question

I have a following HTML and Javascript code:
<script type="text/javascript">
$(function() {
$('#form_1 input').on('change', function() {
val = $('input:radio[name=graf]:checked').val();
$.ajax({
type: 'POST',
data: ({graf_id: val}),
url: 'rrd_image.php',
success: function(data) {
$('#div_1 img').attr('src', data);
}
});
});
});
</script>
<div id="div_1">
<form id="form_1">
<input type="radio" name="graf" value="1">Daily
<input type="radio" name="graf" value="2">Weekly
<input type="radio" name="graf" value="3">Monthly
</form>
<img src="default.png">
</div>
And the rrd_image.php:
$graf_id = $_REQUEST['graf_id'];
$tmpfile = "/tmp/rrd.png";
// rrd_graph options...
rrd_graph($tmpfile, $options);
header( "Content-Type: image/png" );
header( "Content-Length: " . filesize( $tmpfile ) );
$fp = fopen( $tmpfile, 'rb' );
if( $fp ) { fpassthru( $fp ); }
fclose( $fp );
exit();
The rrd_graph.php itself is working, but when i click one radio-button, the HTML page
do not reload the right PHP generated rrd image.

Answer 1

The problem is your PHP file is returning an image, not a URL. What I would do is pass your graf value, along with a time string, in the query string and then tell JS to load that image instead
$(function() {
$('#form_1 input').on('change', function() {
var val = $('input:radio[name=graf]:checked').val();
var time = new Date().getTime();
$('#div_1 img').attr('src', 'rrd_image.php?graf_id=' + val + '&time=' + time);
});
});
You don't need AJAX anymore because the time parameter will always be different and thus your browser won't cache it.