Jquery image cache trouble

JavaScript
1

Hi.
In a script I change the image but
this has the same name so I tried
with the old trick to append a fake
query string like
myimage.jpg?12564466 but the image
doesn’t change.
Have you got any idea to solve the problem ?
the snippet


/*
I click in a td element (el)
with a img and a link
*/
var img = el.find('img').get(0);
img.src = img.src + '?' + time();
var htmlTd = el.html();
/*
after a ajax call I pass it 
el and htmlTd
*/
el.html(html);

Bye.

2

I don’t see how you’re changing the image. If the src doesn’t change, the image doesn’t change…

3

Actually the src change
only for the query string :frowning:

4

Yes, but that is not going to affect the actual image that is displayed. If you want to force the browser to re-download the image, that will be difficult, because it will probably be cached.

I think I realise what you’re doing. Is this something to do with the user uploading an image and then you changing it on the server side (like cropping or resizing it)? If so, I’d just change the path on the server. Even if it’s just a temporary name. The initial upload location should definitely be a temporary location anyway, and you can destroy the temporary file when the script exits.

The only other solution I can think of involves mod_rewrite, but it is definitely a bit of a dirty workaround.

5

This way works


 var outPut = '<img width="65" height="40" id="thumb_'+id+'" alt="thumbs" title="Click to update the thumb"  src="'+  sBasePath +'/uploads/video/thumb/' + id + '.jpg?' + time() +'" />';
          outPut += '<br><a class="showVideo" id="show_'+id+'" href="#">Play</a>';
          el.html(outPut);

and it the quite the same.
I don’t see the point.

6

You guest :slight_smile: (The user can change a thumb)
I agree with you but with the ‘by hand’ html the script works
fine.

7

I think your problem isn’t related to what you’ve posted. A different query string is a different url and the browser can’t assume. Maybe you should do some debugging to find your mistake. You could also try creating a complete but minimal demo which demonstrates the problem(10-20 lines tops including html and js). I doubt the problem will still be there, but, that’s kinda the point.

8

html


<div id="dataWrapperOut">
<table id="dataWrapper" class="tablesorter"  cellpadding="0" cellspacing="1">
<thead>
<tr>
<th>Id</th>
<th>Slug</th>
<th>Title</th>
<th>Description</th>
<th>Filename</th>
<th>Channel</th>
<th>Vote</th>
<th>Votes</th>
<th>Duration</th>
<th>Upload date</th>
<!-- <th> Upload ip</th> -->
<th>Thumbs</th>
<th>Tags</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr id="video_row_1">
<td>1</td>
<td>testone</td>
<td class="updateTitle" title="Click to update title">Test video one</td>
<td class="updateDescription" title="Click to update description">
<span class="truncate">Description test truncate ..</span>
<span style="display:none" id="truncate_1">Description test long
test longtest longtest longtest longtest longtest longtest long</span>
</td>
<td>first.flv</td>
<td class="updateChannel" title="Click to update channel">CDN</td>
<td>0</td>
<td>25</td>
<td>45</td>
<td>20 Aprile 2010</td>
<td class="updateThumb" title="">
<img src="/community/uploads/video/thumb/1.jpg" title="Click to update the thumb" alt="thumbs" width="65" height="40" id="thumb_1" /><br />
<a href="#" id="show_1" class="showVideo">Play</a></td>
<td class="updateTags" title="Click to update tags"></td>
<td><a href="/admin/video/delete/id/1" title="delete" class="deleteVideo" id="video_1">
<img src="/static/images/admin/delete.gif" title="delete" alt="delete" />
</a>
</td>
</tr>
</tbody>
</table>
</div>

Javascript (this works)


tvnVideoApp = {};

tvnVideoApp.updateThumbXhr = function(el,w,id) {
  $("#thumbLoader")
    .ajaxStart(function(){
      $(this).show();
    })
    .ajaxComplete(function(){
      $(this).hide();
    });
 
  $.ajaxFileUpload
    (
      {
        url:sBasePath + '/admin/video/updatethumbxhr/id/'+id,
        secureuri:false,
        fileElementId:'thumbToUpload_'+id,
        dataType: 'json',

        success: function (data, status){
          if(typeof(data.error) != 'undefined'){
            alert(data.error);
            return;
          }
         // alert(data.info);
          el.width(w);
          var outPut = '<img width="65" height="40" id="thumb_'+id+'" alt="thumbs" title="Click to update the thumb"  src="'+  sBasePath +'/uploads/video/thumb/' + id + '.jpg?' + time() +'" />';
          outPut += '<br><a class="showVideo" id="show_'+id+'" href="#">Play</a>';
          el.html(outPut);
         },
        error: function (data, status, e){
          alert(e);
        }
      }
    );
};
tvnVideoApp.updateThumb  = function(el){
  var newWidth = 280;
  var oldWidth = el.width();
  var videoId = tvnVideoApp.getVideoId(el);
  var frmId = 'frmUpdateTags_' + videoId;
  var frm = '<form action="" class="frmUpdateThumb" id="' + frmId  + '" method="POST" enctype="multipart/form-data">';
  frm += '<input type="hidden" name="id" value="' + videoId + '">';
  frm +='<input type="hidden" name="MAX_FILE_SIZE" value="10240" id="MAX_FILE_SIZE" />';
  frm += '<input type="file" id="thumbToUpload_' + videoId +'" name="thumbToUpload" class="inputFile" />';
  frm += '<input type="button" value="Upload" class="btnUpdateThumb" id="btnUpdateThumb_' + videoId + '" />';
  frm += '<img id="thumbLoader" src="'+  sBasePath +'/static/images/admin/thumb-loader.gif" style="display:none;" />';
  frm += '</form>';
  el.width(newWidth);
  el.html(frm);
  $('input.inputFile').filestyle({ 
    image: sBasePath + '/static/images/admin/upload.jpg',
    imageheight : 25,
    imagewidth : 65,
    width :215
  });
  $('#btnUpdateThumb_' + videoId).click(function(){
    tvnVideoApp.updateThumbXhr(el,oldWidth,videoId);
  });
};
tvnVideoApp.init = function(){
  $('#dataWrapperOut').click(function(event){
    var $tgt = $(event.target);
    if ($tgt.is('td.updateThumb img')) {
      tvnVideoApp.updateThumb($tgt.parent());
    }
  });
};
$(function() {
  tvnVideoApp.init();
});

Javascript (this doesn’t work)


tvnVideoApp = {};

tvnVideoApp.updateThumbXhr = function(el,w,id,html) {
  $("#thumbLoader")
    .ajaxStart(function(){
      $(this).show();
    })
    .ajaxComplete(function(){
      $(this).hide();
    });
 
  $.ajaxFileUpload
    (
      {
        url:sBasePath + '/admin/video/updatethumbxhr/id/'+id,
        secureuri:false,
        fileElementId:'thumbToUpload_'+id,
        dataType: 'json',

        success: function (data, status){
          if(typeof(data.error) != 'undefined'){
            alert(data.error);
            return;
          }
         // alert(data.info);
          el.width(w);
          el.html(html);
         },
        error: function (data, status, e){
          alert(e);
        }
      }
    );
};
tvnVideoApp.updateThumb  = function(el){
  var newWidth = 280;
  var oldWidth = el.width();
  var img = el.find('img').get(0);
  img.src = img.src + '?' + time();
  var htmlTd = el.html();
  var videoId = tvnVideoApp.getVideoId(el);
  var frmId = 'frmUpdateTags_' + videoId;
  var loader = '<img id="thumbLoader" src="'+  sBasePath +'/static/images/admin/thumb-loader.gif" style="display:none;">';
  var frm = '<form action="" class="frmUpdateThumb" id="' + frmId  + '" method="POST" enctype="multipart/form-data">';
  frm += '<input type="hidden" name="id" value="' + videoId + '">';
  frm +='<input type="hidden" name="MAX_FILE_SIZE" value="10240" id="MAX_FILE_SIZE" />';
  frm += '<input type="file" id="thumbToUpload_' + videoId +'" name="thumbToUpload" class="inputFile" />';
  frm += '<input type="button" value="Upload" class="btnUpdateThumb" id="btnUpdateThumb_' + videoId + '" />';
  frm += '</form>';
  el.width(newWidth);
  el.html(frm);
  $('input.inputFile').filestyle({ 
    image: sBasePath + '/static/images/admin/upload.jpg',
    imageheight : 25,
    imagewidth : 65,
    width :215
  });
  $('#btnUpdateThumb_' + videoId).click(function(){
   tvnVideoApp.updateThumbXhr(el,oldWidth,videoId,htmlTd);
  });
};