Preview image isn't always reloaded using JQuery and the AJAX Upload jQuery plugin

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, 开发者_StackOverflow社区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);
            }
        }); 

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);
            }
        });