Why Internet Explorer differs from the expected functionality on a back button

Question

In my ASP.NET MVC project, we have introduced Lucine Searching, (Though in this context these details are not required, just giving some background, because I believe my issue has something to do with IE browser and caching).

In this page the user can filter their search based on a keyword. And the user can click to go to the listed out items and come back to the same page with the browser back button or a manual HTML button which has the javascript code, onclick = "location.href = 'Javascript:history.go(-1);'" ).

In Chrome, Firefox and even in Internet explorer 9, user gets back the page where he left off without any issues. I meant it keeps the value the user entered.

However both in IE 10 and IE 11 when the user clicks on the filtered list item it goes into the page and when user clicks either on the browser back button or HTML back button first time I get back the correct filtered page. However when the user again clicks on any of the item, and do the same procedure, I will not get back the filtered value. Instead with all the results, even the text box will not have the keyword entered by the user.

It is always assumes that the back button is there to help the people get back the same page and state where they left. I left with out any clue why IE 10 and 11 acts differently. Could any of you please help me to figure out what I am missing here.

Answer 1

In special cases (where just the url of the page can not determine state - because of some internal in-page dynamic functionality), We need to implement the history handling for ourselves.

Setting History tokens – Whenever the user takes an action that changes the “screen” in a way that you want to save, you should store a token

• History.newItem("someLinkTarget", false);
• Responding to History tokens

Whenever the URL ends in #someToken, that token is passed to the onValueChange method of the History’s ValueChangeHandler

public void onValueChange (ValueChangeEvent<String> event) {
String linkTarget = event.getValue();
if (checkForYourSavedToken(linkTarget)) {
... your code displays your expected results;
} else { … }

This knowledge is from GWT reading though, I did not test this at its core. Please ignore if this does not help you anyway. (Also please find w3schools which suggests that There is no public standard that applies to the history object, but all major browsers support it.

Answer 2

If you're using ajax within the page, then leaving & coming back, that ajax state will be lost. A page does not persist any changes made after it's loaded when you click forward or back.

That's not strictly true though. Forms are persisted and I've used this trick in the past.

Page loads & user does a search which is loaded via ajax. Save the ajax response to a hidden input. When the user leaves the page & returns, the page script detects there is now content in the hidden input & processes this, displaying the previously retrieved results to the user.