How to make updateDom actually refresh <img src...>?

matthewj

Hello - hoping someone can help:

I’ve created a module that displays some data graphed with Plotly. Plotly provides a link to a .png of the graph. I then include that link within the wrapper.innerHTML (e.g. "img src = “https://plot.ly/~myPlotlyAccount/myGraph.png”). That all works fine and the graph shows up great within the module. However, when the graph is updated with new data, and I call updateDom to reflect the newly updated graph, the image does not change (though the .png file at the plotly link has changed). I assume the mirror is pulling some kind of cached ‘myGraph.png’, but I can’t figure out how to prevent that. If I completely refresh the browser (or stop and restart the mirror) it will load the latest, updated myGraph.png.

I’ve tried adding a timestamp to the img src address, but that doesn’t seem to help. Any other suggestions for how to make the dom actually refresh this particular image???

Thanks for any help you can offer!!

Snille

Hi @matthewj
You can use javascript to make the image URL unique all the time thought adding a “number” (in this case just a simple timecode).

OBS: I had to add spaces after the " < " before the end " > ".
Just remove them when you use it.

Otherwise it would not show.

< img id="graph" alt="" src="https://plot.ly/~myPlotlyAccount/myGraph.png" />

< script language="javascript" type="text/javascript" >
  var d = new Date(); 
  document.getElementById("graph").src = "https://plot.ly/~myPlotlyAccount/myGraph.png=" + d.getTime();
< /script >

Good luck.

matthewj

Hi @Snille ! Thanks very much for the help. Unfortunately, that solution isn’t working for some reason. I’d originally tried:

var imagesource = ‘< img src=‘https://plot.ly/~myPlotlyAccount/myGraph.png#’ + newDate().getTime() + ’ />’;
wrapper.innerHTML = imagesource;

That didn’t work, so I tried your solution above (in case maybe executing the javascript within the wrapper HTML made some difference) - but it didn’t seem to matter. The module only displays the image as loaded at startup, even after it shows the updateDom(500) animation.

Any other possible solutions?? Thanks again for the help!

matthewj

I figured it out. Of course, I had included an errant ’ " ’ in the img string. Thanks again for focusing me in the right direction!

Snille

Oh, sorry, I completely forgot about this topic. Good that you solved it.