Ajax: Tackle the Refresh Button
Well I decieded to show you a little trick on how to stop some of the issues
with the refresh button. This is a quick and easy to implement. If your Ajax
calls have some complexity, then you are going to have to adapt this slightly,
but it may give you a little insight into a solution. Let us see what the
problem is
Without Remember Code
First lets do a little test to see what happens with a click of the refresh
button. Click on one of the three buttons below then hit the refresh.
Default Text
As you can see the problem with the refresh is it resets our user's selection
back to the default setting. In some cases this is good, others, it is bad! So
how can we stop this problem?
With Remember Code
Well we can use cookies or we can use the window.location object's hash
property. By setting the has part of the URL, we can store part of the page's
current state on the page. Lets try an example before we dig into the code.
Default Text
After clicking the refresh button, the code looks for the hash, if it sees it,
it makes the request to get the information. Now this can keep your form fields
and advertisements filled in. Let us now look at this basic solution below
which has two major parts: the request and the onload event handler.
function makeRequest2(str){
var loader1 = new
net.ContentLoader("testHistory.aspx",finishRequest2,null,"POST","q=" + str);
window.location.hash = str;
}
function finishRequest2(){
document.getElementById("spanId2").innerHTML = this.req.responseText;
}
window.onload=function(){
if(window.location.hash.length > 0)
makeRequest2(window.location.hash.substring(1,window.location.hash.length));
}
The first thing is we set the hash of the window to the parameter that the
server recognizes. (Note: setting the hash does not cause the page to
refresh/submit!) If your system is a little more advanced, you will have to
figure out a relationship between the server and the client. The other thing we
do is add the onload handler to the document so we can look for the hash. If it
exists, we remove the # and send the XMLHttpRequest to the server. The request
then fills in the information on the page. The user may notice the data swap
depending on the lenght of time for the response. It is a rather simple
solution with a lot of work that needs to be done if you have a complex
request.