History restored

I currently work on a Web2.0 project for a customer where we use AJAX extensively. We download all of the HTML code and JavaScript from index.html and every part of the application after that are implemented using DHTML and AJAX requests to the server.

To give the user the standard Web experience we are using a JavaScript library called Really Simply History. By using this library we can control that will happen if the user presses the back button in the browser.

The library worked great until IE7 started to appear. Suddenly we got strange "white-outs" of the pages. Then clicking a button or a link all HTML of the page was removed and only two buttons of the UI was left.

After some digging using Google I found a post in Spanish describing that went wrong and a fix. The problem seems to be that dhtmlHistory.js breaks the DOM in some way. I implemented the fix suggested by jorgemaestre and it worked, the whiteouts was removed.

But instead I got other problems. Pressing F5 for a page reload did not work as expected, after hitting F5 the site reloaded but I was taken back to the home page. This means the history function did not work. I did some debugging and discovered that for dhtmlHistory.js to work, the form field values needed to be preserved. I also found another post on the Internet about IE not saving the values of a form if it's created after the page has loaded.

The solution is to let the dhtmlHistory.js create it's form during normal page loading but as the last part of the page, after all other content. To implement the fix:

1) Open the dhtmlHistory.js and remove the last rows saying:

/** Initialize all of our objects now. */
window.historyStorage.init();
window.dhtmlHistory.create();

2) To your main index.html or whatever that's using dhtmlHistory.js add as the last part before </body>

</script>
/** Initialize all of our objects now. */
window.historyStorage.init();
window.dhtmlHistory.create();
</script>