javascript history.back losses the search result

Question

Page A:

$(document).ready(function () {
    bindData();
});

function bindData() {
    $('#searchbtn').bind('click', function () { SearchResult(); });
}
function SearchResult() {
 ajax call...
}

Page A HTML:

<input type="button" id="searchbtn" />

Page B Details---> this page comes after selecting a specific search result from page A search list

    <a href="javascript:history.back();">Back</a><br />

Now when I go back to the Page A I can see my search criteria's as they were selected but the result Div is gone. What I am trying to do is I want the search list to stay when the Page comes back. I think what I can do here is some how call the searchbtn click event again when the page comes back so the list will come-up again. Can anyone tell me how to fire the searchbtn click event only when the page comes back from Page B. or point me in the right way of doing this.. Thanks

Answer 1

The Browser Back button has long been problematic with AJAX. There are scripts, workarounds, and techniques out there (depending on the framework that you want to use).

Since it appears that you are using jQuery (based on your posted JavaScript syntax), here is a link to another Stackoverflow post regarding back button jQuery plugins.

Answer 2

history.back() will return you to the last URL visited, meaning that any ajax calls made during the user's visit will not be automatically repeated. Your browser may automatically restore your form selections, but the SearchResults() function is only called by a click event, not a selection event.

You can bind URLs to ajax states using a framework like sammy.js. That way, history.back() would take you to a URL associated with SearchResults().

Answer 3

    function bindData() {
    var chkinput1 = $("input:checkbox[name=x]:checked").length;
    var chkinput2 = $("input:checkbox[name=y]:checked").length;

    if (chkinput1 > 0 && chkinput2 > 0) {
       SearchResult();
     }
    $('#searchbtn').bind('click', function () { SearchResult(); });
    }

I know this is the worst way to achieve this result but I think instead of using any other plugins to add complexity we will go with this for now. If anyone else is looking for the same question let me tell you again this is not the best practice as on returning back to the history we are calling the search result again depending upon the cached input selection of checkboxes and generating the whole ajax call again to display the list. On the first request I am caching the list and setting sliding expiration so its not taking anytime to comeback and so everyone lives happily.