refresh detection algorithm not working [Archive]

gib65

01-20-2012, 06:40 PM

Hello,

I'm trying to write some javascript that will detect if the page has been loaded because of the refresh button being pressed. I've searched google on how to do this, and several websites recommend something similar to the code I'm implementing below:

<script type="text/javascript" language="javascript">

// in head

function checkRefresh() {

alert("BEFORE: value = " + document.getElementById("visited").getAttribute("value"));

if (document.getElementById("visited").getAttribute("value") == null ||
document.getElementById("visited").getAttribute("value") == "")
{
document.getElementById("visited").setAttribute("value", "refreshed")
}

alert("AFTER: value = " + document.getElementById("visited").getAttribute("value"));
}

</script>

...

<body onload="Javascript:checkRefresh();">

...

<form id="hiddenform">
<input type="hidden" id="visited" value="" />
</form>

</body>

My variation differs from most of the examples on the internet in a few ways (which may or may not affect its functionality):

1) Most examples access the elements by directly using their names (as in: document.hiddenForm.visited.value). I'm using document.getElementById(...).getAttribute(...) just because that seems to be the safest way to ensure you are in fact getting the elements you want, and setAttribute(...) to ensure you're setting the attribute in the proper way. This entails that I need to set the ID in the form and input elements rather than the name.

2) I'm accessing the input tag directly (rather than going through the form) because I really don't see how this would make a difference.

3) I'm doing all this within asp:content tags which, from what I understand, can affect the behavior of the elements within it.

I'm not sure if this works out for other programmers, but for me it doesn't seem to be working. My alert messages in the checkRefresh function tell me that the value of the input element does indeed change as expected, but it seems to get wiped out and reinitialized to the original value of "" when the page is refreshed.

Am I doing something wrong?

Thanks for any help.

jscheuer1

01-21-2012, 06:12 AM

First off, get/setAttribute isn't the proper way to do everything and in general should only be resorted to when getting/setting the property isn't working. There are cases though where neither work as expected/desired.

Now, this can only work because form element values are a special case in HTML. No other type of element property can be expected to survive a refresh. Because we are relying upon that for something like this, it's best to access them as part of the the document's forms collection and as part of the form's elements collection. In any case, yes your version - though it accomplishes the same things in the DOM as the below, does not work, while the below code does:

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script>
// in head
function checkRefresh() {
var vis = document.forms.hiddenform.elements.visited;
alert("BEFORE: value = " + vis.value);
if (!vis.value){
vis.value = "refreshed";
}
alert("AFTER: value = " + vis.value);
}
</script>
</head>
<body onload="checkRefresh();">
...
<form id="hiddenform">
<input type="hidden" id="visited" name="visited" value="" />
</form>
</body>
</html>

The difference being that because the above code directly accesses the input's value property, it not only changes the DOM, but also the forms collection.

Put another way, you want to access and change the value property, which will also affect the value attribute, not access and change the value attribute which has no effect upon the value property.

This would also work:

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script>
// in head
function checkRefresh() {
var vis = document.getElementById('visited');
alert("BEFORE: value = " + vis.value);
if (!vis.value){
vis.value = "refreshed";
}
alert("AFTER: value = " + vis.value);
}
</script>
</head>
<body onload="checkRefresh();">
...
<form id="hiddenform">
<input type="hidden" id="visited" name="visited" value="" />
</form>
</body>
</html>

because it's still accessing the value property as opposed to the value attribute. But it will fail in antiquated 'version 4' browsers.