logo Pascarello.com Integrating the Client with the Server
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.

�2005 Pascarello.com