Changing image src with jQuery. (Doesn't work on Firefox)

Question

I'm writing an Ajax contact form. I have written my own captcha too. But I have a problem about refreshing the image. I have written this like that:

Reloading the captcha:

<code>$("#captchaSection").load("captcha_p.php");</code>

And the captcha_p.php file:

<code>< img src="captcha.php" name="imgCaptcha" /></code>

And I have added this lines to the capcha.php:

header("Cache-Control: no-cache, no-store, must-revalidate");
header('Content-type: image/png');
imagepng($im);
imagedestroy($im);

It works perfect on Google Chrome and Safari. But doesn't work on Firefox and Explorer.

Thanks!

Answer 1

It seems that Firefox and IE are caching the image. To prevent this, append a timestamp to the URL and image source:

In Javascript you can use new Date().getTime():

$("#captchaSection").load("captcha_p.php?" + new Date().getTime());

In PHP you can use microtime():

< img src="captcha.php?<?php echo microtime(); ?>" name="imgCaptcha" />

I don't see any benefit of using .load() to load HTML that contains the image. It would be easier to just change the src property of the image, for example:

// refresh captcha
$('img[name=imgCaptcha]').prop('src', 'captcha.php?' + new Date().getTime());