0
    <img src="generate.php" id="captchaimg"/>
   <a href="javascript:void(0);" onclick="document.getElementById('captchaimg').src='generate.php';">Not readable? Change code.</a>

I know this question is already asked but the methods described in that is not working for me or i dont know the proper way of using. I have used the code as inline and i created a normal Javascript function and eventhough i checked with the JQuery code on click but the image is not loading in the Firefox whereas the Captcha image is loading correctly on Chrome when i click the Not Readable so please Help me friends to fix the issue Thanks in advance Dude!!!

Raja Manickam
  • 1,743
  • 4
  • 20
  • 28
  • 3
    Do you have any errors in your console? – Shamoon Mar 30 '15 at 11:34
  • 1
    In the example given, the src of the image is the same as the src in the onclick, I am guessing that firefox won't reload the image is the src is the same. – Salketer Mar 30 '15 at 11:37
  • 2
    Do you know that it is `getElementById` that's not working? It's more likely that FF is seeing the same image `src` being set and not reloading the image. Try appending a ["cache breaker"](http://stackoverflow.com/questions/1077041/refresh-image-with-a-new-one-at-the-same-url) – James Thorpe Mar 30 '15 at 11:37
  • I tested it. It is working. https://jsfiddle.net/qmnsefqz/ – Sagar Mar 30 '15 at 11:41
  • 1
    works fine in FF Version 36.0.1 – Edwin Krause Mar 30 '15 at 11:49
  • Thanks friends... there is no console error and im using the FF version 36 – Raja Manickam Mar 30 '15 at 12:17

2 Answers2

2

I think your example above may not be working because when you refresh the captcha you set the src attribute to generate.php, which is exactly the same as what it was before. Firefox probably thinks it's not worth re-fetching the image as the same URL is used. To get around this I've set the src to nothing, then set it back to generate.php.

It's also best practice to take out more complicated Javascript from your HTML elements and move them into their own script. As a basic example, you could try something like this:

<img src="generate.php" id="captchaimg" />
<a id="regenerateLink" href="#">Not readable? Change code.</a>

<script>
var captcha = document.getElementById('captchaimg');
var regenerateLink = document.getElementById('regenerateLink');

regenerateLink.onclick = function() {
  captcha.src = "";
  captcha.src = "generate.php";
};
</script>

Please note there's still a lot to improve here and I wouldn't consider the code production ready, but it's a start :)

alexpls
  • 1,914
  • 20
  • 29
0

The firefox is not loading the content because the source is same. I just append the date and time to make it as the new source attachment and it got worked
credits: cache breaker" – James Thorpe, Salketer

<img src="generate.php" id="captchaimg"/>

<a href="javascript:void(0);" onclick="document.getElementById('captchaimg').src='generate.php?'+ new Date().getTime();">Not readable? Change code.</a>
Raja Manickam
  • 1,743
  • 4
  • 20
  • 28