Question

I have a site where I can upload an image, and i am using a preview system where i show the selected image. The problem is that the image SOMETIMES is loaded to the preview div, but other times it remains the same. However, if i hit the refresh button, then the image does in fact change. Therefore, the controller action is definitely getting called, it just doesnt always refresh the preview image. This is my code:

<img name="liga_r2_c3" src="/../images/ligasDeAmigos/prizes/<?php print $model->prize_photo?>" width="100" height="100" border="0" id="liga_r2_c3" alt=""/>

new AjaxUpload('liga_r2_c3', {
            action: 'uploadImage',
            data: {
                liga_id : liga,
                isPrize : 'true',
            },
            onComplete: function(file, response) {
                  var liga = $("#hidden_prize_picture").val();
                  var ruta = "/../images/ligasDeAmigos/prizes/"+liga+ '?rid=' + Math.random(); 
                  $('#liga_r2_c3').attr('src',ruta);
            }
        }); 

Answer 1

Considering the predictability of Math.random() are you sure you are not running into duplicate random values? Date.getTime would be a much better solution here since it should give you a unique identifier between refreshes.

<img name="liga_r2_c3" src="/../images/ligasDeAmigos/prizes/<?php print $model->prize_photo?>" width="100" height="100" border="0" id="liga_r2_c3" alt=""/>

new AjaxUpload('liga_r2_c3', {
            action: 'uploadImage',
            data: {
                liga_id : liga,
                isPrize : 'true',
            },
            onComplete: function(file, response) {
                  var liga = $("#hidden_prize_picture").val();
                  var d = new Date();
                  var ruta = "/../images/ligasDeAmigos/prizes/"+liga+ '?rid=' + d.getTime(); 
                  $('#liga_r2_c3').attr('src',ruta);
            }
        });