jquery - Enabling the Back button to act as an 'undo' button in an Ajax app -

i have problem ajax app i'm trying working browser's , forward buttons. using jquery history plugin enable browser history.

the app consists of page of products. there sort bar enables user sort products various values. user may select product clothing category (dresses, tops, bottoms, skirts, etc), sub-category department (skirt: mini, maxi, high-waisted, boho/hippy, etc), size (xs s m l xl xxl xxxl), color (white, black, gray, blue, red, etc), , era , materials.

most options enabled using ajax load latest selected option appropriate div.

so instance, select color black, following code executed

$('#colorsort').load('colorsort.php?color=black'); 

then if user selects brown:

$('#colorsort').load('colorsort.php?color=brown'); 

then if user de-selects black:

$('#colorsort').load('colorsort.php?colorremove=black'); 

this works fine long don't need support back/forward buttons, when add button capability via jquery history run problems. example: using our previous example, user selected colors black , brown. let's user clicks button. user expect brown color choice removed, isn't case, because url being loaded is:

colorsort.php?color=black,  

and not

colorsort.php?colorremove=brown  

which needs be.

i tried working-around problem appending set of 'undo' params query string. instance,

colorsort.php?color=brown//colorremove=brown  

contains current query string before double slashes , 'back' query string after slashes. using code, if knew new link had been clicked, load current query string (before slashes) , if knew button had been clicked, load 'back' query string following slashes.

but problem there not appear way detect whether back/forward buttons clicked. jquery history operates under hashchange event, , event makes no distinction (as far know) event fired it.

this problem. grateful if super-smart folks of stackoverflow.com me find solution. thank you!

check out jquery bbq (back button & query). allows achieve want storing state using browser's standard history implementation. uses hashchange event (when supported , trickery when not) trigger actions when things of interest happen (ie. clicking on link or clicking button)

this way can click link, add new hash param onto page, can fetch whatever param , load data accordingly. when hit back, gets previous value of param, , load did before, caching possible. that's kind of simplistic, not true explanation, close enough brief overview.