Question

I’m building a contact form that uses ajax via jQuery to fetch a CAPTCHA image (and a hidden data field) and drops it into the form after DOM ready. Also, when the CAPTCHA image is clicked it reloads the image (and the hidden data field).

The CAPTCHA image creation script is of my own creation that I’ve been using for a couple of years – it’s pretty robust and works fine, however this is the first time I’ve tried integrating it via ajax to a website.

Roughly speaking I’ve got the following jQuery. I figure the supporting HTML/CSS/PHP is fairly inconsequential – I can supply some if necessary but it all seems to work just fine… the issue appears to be with the jQuery or browser caching with Chrome…

$(document).ready(function() {
    commentFormCaptchaWrapper = $('#captchawrapper');

    // Check DOM for CAPTCHA wrapper... if it's there get the CAPTCHA image
    if (commentFormCaptchaWrapper.length > 0) {getCaptchaImage()}

    // If the CAPTCHA image is clicked get a new one
    commentFormCaptchaWrapper.click(getCaptchaImage);
});


function getCaptchaImage(){
    commentFormCaptchaWrapper.html();
    $.ajax({
        url: '/captcha/ajax.captcha.php',
        type: 'post',
        cache: false,
        success: function(response){
            commentFormCaptchaWrapper.html(response);
        },
        error: function(response){
            alert ("Ajax Error");
        }
    });
}

Everything works exactly how I would like it to in Firefox (and, indeed, Opera and IE) but it doesn’t work in Chrome. In Chrome, the initial ajax call for the CAPTCHA image and hidden field works just fine but when you click the CAPTCHA there’s a brief flicker as the Captchawrapper div is emptied (so the click is detected OK) but it reloads the same image.

To briefly explain my CAPTCHA script, typically it generates an image based on some text and encrypts the content to use as a file name (with a timestamp suffix) – the image is then cached with a unique name. Therefore, the CAPTCHA script delivers a different file name, completely unique, each time it is used.

I’m not completely up to speed with jQuery yet, however I’ve turned off ajax caching in the jQuery as far as I’m aware so I just can’t figure what’s going wrong… can anyone help?

Answer 1

Building on my comment above, there could be two levels of caching happening here (request and response). Using cache: false on the $.ajax call should be enough to prevent request caching at the browser.

At the server level, however, proper response headers must be set for the browser to correctly interpret how it should cache the response. For PHP, a typical set of “do not cache!” headers might look like this (at a minimum):

$ts = gmdate("D, d M Y H:i:s") . " GMT";
header("Expires: $ts");
header("Last-Modified: $ts");
header("Pragma: no-cache");
header("Cache-Control: no-cache, must-revalidate");

OTOH, in the answer via the link that Bondye posted, there’s another fix:

$.ajax({
    url: '/captcha/ajax.captcha.php',
    type: 'post',
    data: '', // <-- Add this!
    cache: false,
    success: function(response){
        commentFormCaptchaWrapper.html(response);
    },
    error: function(response){
        alert ("Ajax Error");
    }
});

Try adding in a data: '', line to your $.ajax() call. You could also further inspect the data in the error callback to see if there’s a weird error code coming back.