Question

I am using JavaScript with jQuery AJAX and I have script as below;

$(document).ready( function() {
$('#process').click(function() {
  var $process = $(this);
  var $message = $process.parent().parent().next().children('td');
  $message.text("Processing...");
  $.ajax({
    type: 'POST',
    url: 'myajaxfile.php',
    data: 'data1=flename1&data2=2&data3=mix',
    dataType: 'json',
    cache: false,
    success: function(result) {
      var result1 = result[0];
      var result2 = result[1];
      if(result1 == "true"){
        alert("true");
        $('#preview').css({ 'background-image':'url(' + result2 + ')' });
        $message.text("");
        return(false);
      }else{
        alert("false");
        $message.html("Error !<br>Error !");
      }
    },
  });
});
});

This sends some data to my ajax file and changes background image of my div having id preview. Everything works well. But still some confusing problem. The ajax file first make some thumbnail image according to data send where data1 = filename1, data1 = filename2 etc etc. If thumbnail is made, it will return a json_encoded array with result1 = true and result2 = imagename. The imagename variable contains full path to the image, images/img1.jpg. But the preview is a headache. Suppose, if it send request with data1=flename1, it will create a thumbnail img1.jpg and is correctly displayed. Then i changed data1 to data2, refreshed page and sent request. but the image displayed was the previous image. I checked directory and found each time for the request, a corresponding correct image file is created in directory. but the problem is with the display. Also, the correct image is getting displayed if I repeat Ajax request for 2 or more times after refreshing the page. it is because of the same image name. but I have no other choice. I am using Firefox.

How can I solve this?

Answer 1

Sounds like you have a caching problem. The first image is fetched from the server but when the images without the path changing, the browser will pull the image out of its cache and you’ll see the old one even though the server has the new one.

The simplest and most reliable way I’ve found for cache-busting is to append a random number in a CGI parameter to the image’s URL:

$('#preview').css({
    'background-image': 'url(' + result2 + '?cb=' + Math.random() + ')'
});

You might need to adjust your server configuration to ignore the ?cb but it should do that on its own.

You could also try playing with the Cache-Control HTTP header on your server for the images in question. Setting:

Cache-Control: no-cache

should do it but the cache-busting URL kludge is more fool proof. Including the Cache-Control header for temporary images is still a good idea though.