Image display using jQuery AJAX

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?

i am running it in localhost... how can i set up my php file in air?? where can i host it?? — Alfred
– Alfred, Commented Jun 27, 2011 at 8:34

mu is too short · Accepted Answer · 2011-06-27 08:39:16Z

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.

T9b · Accepted Answer · 2011-06-27 09:39:12Z

0

Have you tried checked what the URL is that returned by yours ajax call? Maybe your server side script is not correct:

var result1 = result[0];       
var result2 = result[1];     

alert(result2); // should help you determine if the script is returning the correct image path

if(result1 == "true"){
...

answered Jun 27, 2011 at 9:39

T9b

3,5825 gold badges37 silver badges51 bronze badges

2 Comments

Alfred Over a year ago

the script is returning correct image path.... but the image is getting cached i think...

T9b Over a year ago

yes I was the answer, but it could have been one or the other. just thought I'd try my luck!

Collectives™ on Stack Overflow

Image display using jQuery AJAX

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related