Back button in Google Chrome Not Retaining Ajax result but works well in other major browsers

user_3977833 0
Viewed 700

I have a web app build with Laravel. Page A has a drop-down list that when a user selects an option, ajax result is displayed beneath the list. The user can click on any row in the ajax result and go to Page B. When the user hit the back button in Opera and Firefox, the option he selected as well as the AJAX result is retained but in Chrome and IE, only the option he selected is retained. How do I get Chrome and IE to work like Firefox and Opera.

Researching, I am told that Chrome doesn't support bfcache and that is why. Is they any work around?

The code for my back button is as follows:

<div id="app-back-button">
  <a href="#" onclick="history.back(); return false;">
    <img alt="Back" border="0" src="{{ asset('images/general/back.png') }}" class="img-responsive" />
  </a>
</div>
google-chrome jquery ajax
3 Answers

Try this one hope it helps you...

jQuery(document).ready(function($) {

  if (window.history && window.history.pushState) {

    window.history.pushState('forward', null);

  }
});
user_110283770

I don't think it is worth to care bfcache unless it stop 'refresh'. The interesting part is op want browsers 'not refresh' to remain the results.

You can save your ajax results to local storage, when your page is loaded, it will try to display data from local, when you hit a button, the page will send ajax as normal and update the local storage.

Don't rely on bfcache, it is a mess.

user_12478900

Save the selection in a cookie. (I recommend using js-cookie.) If a user comes back to page A, do a check for the cookie. If it exists, select the correct list item and trigger the handler that ought to trigger the ajax request.

So in the ajax code result that adds the result below the list, add the cookie. It's easiest to add an ID to each option in the selection list, so you can add the ID as a cookie value.

Inside the ajax done handler:

Cookies.set('pageA-selection', 'SelectedId');

And then on page A's document ready you run the check:

if (Cookies.get('pageA-selection')) {
  // Assuming you trigger the ajax request by a click handler on the list item
  $('#'+Cookies.get('pageA-selection')).click();
}
user_11506830
Related