Get Into This

One of the shortcomings of Ajax/Remote Scripting is the fact that it practically renders the browsers Back and Forward buttons useless. This is because the request and response are made using javascript and the browser fails to acknowledge this as a regular request (how could it, the url never changed?).

Perhaps in future browsers, when an Ajax request is made, the browser will keep in its memory the current state of the DOM and return to this state when the back button is pressed. Until we have such functionality in the browser, we can use the Dojo Toolkit to mimic this behavior.

The Dojo toolkit's bind() command is a wrapper around the regular old xmlhttprequest object. The difference is that Dojo's implementation allows you to define what happens when the user hits the Back and Forward buttons. They accomplish this by capturing the event and firing any defined javascript method.

So for example, if you have a ajax call that reads some data from the server and populates a table, using dojo, you can define the back button to call another javascript function called resetTable() or clearTable(), which would just clear the contents of the table.

Here is a code snippet from the article on the bind() method:

var sampleFormNode = document.getElementById("formToSubmit");<br /> dojo.io.bind({<br /> url: "http://foo.bar.com/sampleData.js",<br /> load: function(type, evaldObj){<br /> // hide the form when we hear back that it submitted successfully<br /> sampleFormNode.style.display = "none";<br /> },<br /> backButton: function(){<br /> // ...and then when the user hits "back", re-show the form<br /> sampleFormNode.style.display = "";<br /> },<br /> forwardButton: function(){<br /> // and if they hit "forward" before making another request, this<br /> // happens:<br /> sampleFormNode.style.display = "none"; // we don't re-submit<br /> },<br /> formNode: sampleFormNode<br /> });

Yeah, its that simple. The article also talks about bookmarking the different "states" of your ajax page. Definitely an interesting article and approach to solving some of the ajax problems.

Related posts:

1. TILT: The Table-less Table Layout