I wanted to be able to allow a user of one of my applications to specify an auto-refresh rate for a summary page. There are a whole bunch of ways of doing this – some discussed below – each having their own strengths and weaknesses as techniques. Given my experience, I thought I would share a) another way of doing it and b) some of the challenges I came across when trying to use other techniques.
Introduction
Before I begin I think it would help to show, in a little more detail, what I was trying to accomplish. The screenshot below is from my TechMagic project that essentially allows users a readonly view of a bunch of common tables in Service Desk Express as a series of datagrids housed in an accordian control.
I wanted users to be able to set their own refresh rates that persisted sessions without storing anything in a database and as such chose to make use of cookies. That was the easy bit – automatically refreshing the page became a little more challenging.
Standard Methods of Auto-Refresh
HTTP-EQUIV Method
The HTTP-EQUIV method of auto-refreshing a page is very simple. Essentially between the <head></head> tags of the HTML you simply include a line: <meta http-equiv=”refresh” content=”5″ />. This would cause the page to refresh every 5 seconds. To make this dynamic such that a user can enter a value all we do is change the line slightly to allow access to it programatically:
<meta id="autoRefresh" runat="server" >
Now in the code-behind we can right some code in the Page_Load event that looks something like:
autoRefresh.HttpEquiv = "refresh";
autoRefresh.Content = txtRefreshRate.Text;
JavaScript Method
The JavaScript method is also very easy to implement. We just create a function that puts a timeout on the page:
<head>
<script type="text/javascript" language="javascript">
function refreshPage()
{
window.location = unescape(window.location);
}
function setTimeOut()
{
window.setTimeout(refreshPage, document.getElementById("txtRefreshRate").value * 1000);
}
</script>
</head>
<body onload="setTimeOut()">
A slightly different approach
Both these methods essentially do the same thing and work perfectly well. The problem is that if my users had applied sorting to any of the datagrids or collapsed/expanded different panels, all these settings were forgotten after the page refreshed. I rapidly realised what I ACTUALLY wanted to do was a programatic postback rather than a refresh. So here is how I did it.
Essentially, I used the JavaScript method above but instead of setting the window.location in the refreshPage function, I simply click the Update button that you can see in the screenshot:
function refreshPage()
{
var btn = document.getElementById("btnUpdate");
if (btn) btn.click();
}
This works perfectly but seems, at least to me, a very clumsy approach so as always, I welcome any feedback (positive or negative).
JOATIT 