7

This is a captcha image with a link that will reload the picture if the user wants. This code works only in Google Chrome. How do I make it work in other browsers?

<img id="captcha" src="captcha.php">

<a id='reload'>Refresh now</a>

$('#reload').click(function(){
    $('#captcha').attr('src','captcha.php')
})
Idrizi.A
  • 9,819
  • 11
  • 47
  • 88

7 Answers7

19

The other browsers probably cache the image. Try the following:

$("#captcha").attr("src", "captcha.php?"+(new Date()).getTime());
johankj
  • 1,765
  • 16
  • 34
6

Try this using no caching method (BTW a tag need href attribute to be set):

<a id='reload' href='#'>Refresh now</a>




    $('#reload').click(function(){
        var timestamp = new Date().getTime();
        $('#captcha').attr('src','captcha.php?'+timestamp)
    })
A. Wolff
  • 74,033
  • 9
  • 94
  • 155
2

It could be browser caching. In other words the browser sees that it already loaded captcha.php so it does not need to load it again.

Try appending a query string to the image source that includes the current time. Since the image source will now be a URL that the browser has not loaded before it will try to reload it.

<img id="captcha" src="captcha.php">

<a id='reload'>Refresh now</a>

$('#reload').click(function(){
    $('#captcha').attr('src','captcha.php?' + (new Date()).getTime());
});

Better yet, set the HTTP headers on captcha.php to ensure the browser will not cache it.

<?php
  // Set headers to NOT cache a page
  header("Cache-Control: no-cache, must-revalidate"); //HTTP 1.1
  header("Pragma: no-cache"); //HTTP 1.0
  header("Expires: Sat, 26 Jul 1997 05:00:00 GMT"); // Date in the past
?>

Source: https://stackoverflow.com/a/4485194/284685

Community
  • 1
  • 1
Adam
  • 43,763
  • 16
  • 104
  • 144
2

Try this:

DOM

<div id="captcha-container">
    <img src="captcha.php" id="captcha">
</div>

jQuery

$('#reload').click(function() {
    $('#captcha').remove();
    $('#captcha-container').html('<img src="captcha.php" id="captcha">');
});

NET Log

Each time I click Reload, a new request is made.

GET captcha.php 
200 OK
127.0.0.1:80

GET captcha.php 
200 OK
127.0.0.1:80

GET captcha.php 
200 OK
127.0.0.1:80

Adding in a new img element will cause the browser to reload it.

phpisuber01
  • 7,585
  • 3
  • 22
  • 26
1

Since all the answers so far use jQuery, I thought I'd post mine which uses only plain Javascript.

// Helper function to attach event listener functions to HTML elements.
function attach(el, event, fun) {
  if (el.addEventListener) {
    el.addEventListener(event, fun);
  }
  else {
    el.attachEvent("on"+event, fun);
  }
}

// Find the <a id='reload'> element.
var id_reload = document.getElementById("reload");
if (null !== id_reload) {
  // Find the <img id='captcha'> element. We assume this works, so no check against null.
  var id_captcha = document.getElementById("captcha");
  attach(id_reload, "click", function() {
    id_captcha.src = "captcha.php?" + (new Date()).getTime();
  });
}
Jens
  • 8,423
  • 9
  • 58
  • 78
1

If the src of the image keep the same, the browser won't send a new HTTP request to the server. So change the src by adding a useless timestamp.

In browser javascript: 

var capImage = document.getElementById("captcha-image");  
capImage.addEventListener("click", function () {  
    capImage.src = "/captcha?timestamp=" + (new Date()).getTime();  
});

This is a demo for refresh captcha image.

jamesxiang
  • 708
  • 5
  • 10
0

You also need to remove the timestap because it will always concatenate with the previous source url. you might run into problems when a user clicks many times on the reload button. So it is better to remove the previous timestamp from the url before appending a new one.

$('#reload').on('click', function(){
    var img=$('#captchaimage');
    var src=img.attr('src');
    var i=src.indexOf('?dummy=');
    src=i!=-1?src.substring(0,i):src;
    d = new Date();
    img.attr('src',src+'?dummy='+d.getTime());
});
kasper Taeymans
  • 6,950
  • 5
  • 32
  • 51