Question

I have a search page which performs an ajax call then generates results (dynamic HTML) at the bottom of the page. The problem is when the user goes to a result (another site) then hits the back button, the original page and query are there, but the dynamic HTML is gone.

I have used the jquery history plugin before. This requires append “#pizza” to my URL if the user searches for pizza. And then whenever my page loads it could restore the state from what came after the #. But this would require remaking the ajax call, doing the search again, and constructing the dynamic HTML again.

Is it possible to structure things so when a user hits “back” the results page is instantly there exactly as it was before they left?

Answer 1

Some browsers will hold on to the page state on back, and some wont. Or they sometimes will, unless the browser tries to minimize memory usage. Bottom line, you can’t rely on it.

So if you use mypage.html#content-hash style urls for ajax state you have to load an empty layout, when have JS handle the hash tag and rebuild the relevant page. This may be slower and take more requests, but that hash does NOT go to the server so JS is required to see what content is needed.

Or if you use the HTML5 push state API you can change the full url of the window without a page reload. In this case, your server can render the whole page in the same state as it would have been setup as ajax. Browse some repositories on Github and you can see how they do this. Click a folder, it animates in and the url changes. Go directly to a subfolder via the URL and the page renders with that subfolders contents there already.