Skip to main content

HTML/Javascript tip: Refreshing an image not the full page

· One min read

I was discussing with a friend about the creation of a monitoring dashboard in HTML. As any monitoring tool you want to be able to see the information in real-time, so you need to refresh the content....

One way of doing it is to refresh the whole page and this is easy, just use the meta tag: <META HTTP-EQUIV="Refresh" CONTENT="5; URL=" > where 5 is the number of seconds between each refresh.

Javascript allows you to easily refresh a specific image of your page (a chart for example):

<img src="myChartServlet" name="chart1"/><script language="JavaScript">  function loadImage() {    var now = new Date();    if (document.images) {      document.images.chart1.src = 'myChartServlet?time='+now.getTime(); // add the time to avoid caching    }    setTimeout('loadImage()',1000);  }  setTimeout('loadImage()',1000);</script>

You can obviously make the whole think dynamic and configurable...