browser caching disrupting HTML Select List Ajax filtering: triggered by the onchange event

Question

I have HTML select list boxes that allow users to search for items. I also have an a simple Ajax implementation that enforces filtering when users select items - triggered by the select element's onchange event firing when options are clicked.

App. logic : user selects items and hits submit -> goes to the search results page.

My problem is when a user navigates back [by browser back button] from my Search Results Page to the select list boxes, the selections are retained but filtering is somehow lost. I think this might be due to browser caching falling apart?

eg. Look of my Searh Page by default.

Search for food Food Products by Ingredients

1. INGREDIENT

   • All Ingredients*
   • Bread
   • Cheese

2. INGREDIENT TYPES

   • All Ingredient types*
   • Cheddar Cheese
   • White bun
   • White Cheese
   • Wholemeal bun

By default the options " All Ingredients " and " All Ingredient Types " are selected by default when the search page loads the search page.

An example of how the simple filter works and the problem scenario in hitting the browser back button.

Scenario: a user then selects bread and the Ajax call filters the second list to only bread items. A user then selects white bun and hits a search button

1. INGREDIENT

   • All Ingredients*
   • Bread
   • Cheese

2. INGREDIENT TYPES

   • All Ingredient types*
   • White bun
   • Wholemeal bun

The user then views the search results which is correct, but on navigating back by hitting the browser back button , this is the view presented. Selections are correct and intact however filtering falls apart.

1. INGREDIENT

   • All Ingredients*
   • Bread
   • Cheese

2. INGREDIENT TYPES

   • All Ingredient types*
   • Cheddar Cheese
   • White bun
   • White Cheese
   • Wholemeal bun

I'm using xmlHTTP = new XMLHttpRequest() form my ajax implementation.

Questions: I'd appreciate answers on:

• what's causing this to occur?
• How I can resolve this issue?

Answer 1

Without seeing code, I suspect that your filtering code only runs when the select event fires. Clicking the "back" button reloads the page including the previous form element values/selections, but the select event doesn't fire.

Your code needs to run the filtering logic both after the page loads and when the select event is fired.