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

Question

Hello everyone. I have a problem with an Ajax app that I'm trying to get working with the browser's Back and Forward buttons. I am using the jQuery History plugin to enable the browser history.

The app consists of a page of products. There is a sort bar that enables the user to sort products by various values. The user may select a product clothing category (dresses, tops, bottoms, skirts, etc), a sub-category department (skirt: mini, maxi, high-waisted, boho/hippy, etc), a size (XS S M L XL XXL XXXL), a color (white, black, gray, blue, red, etc), and an era and materials.

Most options are enabled by using Ajax to load the latest selected option into the appropriate DIV.

So for instance, to select the color Black, the following code would be executed

$('#colorSort').load('colorSort.php?color=Black');

Then if the user selects Brown:

$('#colorSort').load('colorSort.php?color=Brown');

Then if the user de-selects Black:

$('#colorSort').load('colorSort.php?colorRemove=Black');

This works fine so long as we don't need to support the back/forward buttons, but when add back button capability via jQuery History we run into problems. For example: using our previous example, the user selected the colors black and brown. Now let's say the user clicks the back button. The user would expect their Brown color choice to be removed, but that isn't the case, because the URL being loaded is:

colorSort.php?color=Black, 

and not

colorSort.php?colorRemove=Brown 

which is what it needs to be.

I tried working-around this problem by appending a set of 'undo' params to the query string. So for instance,

colorSort.php?color=Brown//colorRemove=Brown 

contains the current query string before the double slashes and the 'back' query string after the slashes. So using this code, if I knew a new link had been clicked, I could load the current query string (before the slashes) and if I knew the back button had been clicked, I could load the 'back' query string following the slashes.

But the problem is that there does not appear to be any way to detect whether the Back/Forward buttons were clicked. jQuery History operates under the hashchange event, and that event makes no distinction (as far as I know) as to what event fired it.

This is my problem. I would be very grateful if the super-smart folks of StackOverflow.com could help me find a solution. Thank you!

Answer 1

check out jquery bbq (Back Button & Query). It allows you to achieve exactly what you want by storing state using the browser's standard history implementation. It then uses the hashChange event (when supported and some trickery when not) to trigger actions when things of interest happen (ie. clicking on a link or clicking back button)

This way you can click a link, it will add a new hash param onto your page, you can fetch whatever that param is and load the data accordingly. When you hit back, it gets the previous value of the param, and you load as you did before, caching where possible. That's kind of a simplistic, not exactly true explanation, but close enough for a brief overview.

Answer 2

Add a hidden field to store color value . first time when you change the color , add a value into a hidden form filed.

check a condition for changing color each time

if you press back button and came back

if hidden field have value make the color what is in that hidden field

in this case brown

otherwise if hidden field is empty default color black.

I hope this will work.

As the page is not submitting session cannot use.