SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Guru whisher's Avatar
    Join Date
    May 2006
    Location
    Kakiland
    Posts
    732
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Jquery image cache trouble.

    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
    Code JavaScript:
    /*
    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. #2
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    I don't see how you're changing the image. If the src doesn't change, the image doesn't change...

  3. #3
    SitePoint Guru whisher's Avatar
    Join Date
    May 2006
    Location
    Kakiland
    Posts
    732
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Actually the src change
    only for the query string

  4. #4
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    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. #5
    SitePoint Guru whisher's Avatar
    Join Date
    May 2006
    Location
    Kakiland
    Posts
    732
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This way works
    Code JavaScript:
     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. #6
    SitePoint Guru whisher's Avatar
    Join Date
    May 2006
    Location
    Kakiland
    Posts
    732
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Raffles View Post
    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.
    You guest (The user can change a thumb)
    I agree with you but with the 'by hand' html the script works
    fine.

  7. #7
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2008
    Posts
    5,757
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #8
    SitePoint Guru whisher's Avatar
    Join Date
    May 2006
    Location
    Kakiland
    Posts
    732
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by crmalibu View Post
    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.
    html
    Code HTML4Strict:
    <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="/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)
    Code JavaScript:
    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)
    Code JavaScript:
    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);
      });
    };


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •