PHP-Captcha-Script in Combination with jQuery-Load works in Webkit-Browsers only

Question

I've a simple PHP script (create.php) which outputs a Captcha-Image using an existing PNG-Image:

<?php
session_start();
$myimg = ImageCreateFromPNG("foobar.png");
$captcha = rand(1000,9999);
$_SESSION["captcha"] = $captcha;
$font = "path/to/font";
$fontsize = 15;
$txtcolor = ImageColorAllocate($myimg, 0,0,0);
$angle = 0;
$coordx = 10;
$coordy = 20;
imagettftext($myimg,$fontsize,$angle,$coordx,$coordy,$color,$font,$captcha);
imagepng($myimg);
imagedestroy($myimg);
?>

I'm calling this script like this (output.php):

<div id="refresh">
<img src="create.php" alt="foo" />
</div>
<span id="trigger-refresh">reload</span>
<script>
$('#trigger-refresh').click(function() {
  $('#refresh').load("refresh.php");
});
</script>

The file refresh.php just looks like this:

<?php
echo '<img src="create.php" alt="foo" />';
?>

When I call the refresh.php in browser, the Captcha-Image is shown correctly - everthing is fine. But after triggering the Jquery-Function in output.html the image/session does not reload. It's just working in Webkit-Browsers, e.g. Chrome. First I thought that the problem can be found in the browser-chache. So I cleared up cache - without any success. Firebug shows that "refresh.php" is load but not the "create.php".

Answer 1

Maybe putting the contents of "refresh.php" in your #refresh div is not enough to reload the contents of "create.php" in every browser (e.g. some browsers must just load "refresh.php" and leave "create.php" as-is as it was already loaded)

I would rather recommend you to create an img tag within your jQuery script, load its contents with the contents of "create.php" and then show that new img tag.

Example code here: https://stackoverflow.com/a/4285068/4475293

var img = $("<img />").attr('src', 'create.php')
    .load(function() {
        if (!this.complete || typeof this.naturalWidth == "undefined" || this.naturalWidth == 0) {
            //error
        } else {
            //replace your img tag with the new one
        }
    });