refresh an image inside a jquery dialog box

Question

I have a jquery dialog box that opens by means of a link. I would like it so that everytime I open the dialog box the image is refreshed.

I tried something like this:

function open_dialog() {
  $("#imageThumbBox").dialog('destroy');
  $("#imageThumbBox").dialog({
    autoOpen: false,
    closeOnEscape: true,
    resizable: true,
    height: 'auto',
    width: 'auto',
    buttons: {
      Cancel: function() {
       $(this).dialog('destroy');
      }
    },
    close: function() {
      $(this).dialog('destroy');
    },
    open: function() {
    }
  });
  var img = db_cgi_url + "/photo.cgi?do=view;ID=" + ID + ";" + now.getTime();
  $("#my_image").attr("src", img);
  $("#imageThumbBox").dialog('open');
}

I can update any "img" tag fine as long as the div is not located in a dialog box. However, since this one is, the img does not update. The dialog box does not seem 2 be destroyed as it opens up immediatley. I tried updated the image in the open and close functions with no success. Any suggestings?

Answer 1

Try moving these two lines into the open callback function:

var img = db_cgi_url + "/photo.cgi?do=view;ID=" + ID + ";" + now.getTime();
$("#my_image").attr("src", img);

That will make sure that the element container actually exists.

Also instead of now.getTime() you might try (+new Date()) just for kicks.

Answer 2

So I figured out the problem. Ironically it did have to do with the date afterall. I was declaring the variable "now" outside of the function, hence, the date was not actually changing.

so I changed the line to

var img = db_cgi_url + "/photo.cgi?do=view;ID=" + ID + ";" + new Date().getTime();

and voila... no problems!