When using back button AJAX results have been lost.

Question

So I've set up a pagination system similar to Twitter's where where 20 results are shown and the user can click a link to show the next twenty or all results. The number of results shown can be controlled by a parameter at the end of the URL however, this isn't updated with AJAX so if the user clicks on one of the results and then chooses to go back they have to start back at only 20 results.

One thought I've had is if I update the URL when while I'm pulling in the results with AJAX it should—I hope—enable users to move back and forth without losing how many results are shown.

Is this actually possible or have I got things completely wrong?

Also, how would I go about changing the URL? I have a way to edit the URL with javascript and have it be a variable but I'm not sure how to apply that variable to the URL.

Any help here would be great!

A side note: I'm using jQuery's load() function to do all my AJAX.

Answer 1

You can't actually change the url of the page from javascript without reloading the page.

You may wish to consider using cookies instead. By setting a client cookie you could "remember" how many results that user likes to see.

A good page on javascript cookies.

Answer 2

It's a duplicate question. Have a look at this.

Answer 3

First 3 results google returns:
first
second
third

I'll eat my shorts if none of them are useful. ^^

And yeah - you can't change URL through JS.

Answer 4

This would be the answer I would put here:

http://stackoverflow.com/questions/946582/browser-back-button-and-dynamic-elements/946654#946654

Answer 5

Not mentioned in the duplicate threads, but useful nonetheless: Really Simple History (RSH).

Answer 6

The answer for this question will be more or less the same as my answers for these questions:

• http://stackoverflow.com/questions/3205900/how-to-show-ajax-requests-in-url/3276206#3276206
• http://stackoverflow.com/questions/3460041/how-does-gmail-handle-back-forward-in-rich-javascript/3460269#3460269

In summary, two projects that you'll probably want to look at which explain the whole hashchange process and using it with ajax are:

• jQuery History (using hashes to manage your pages state and bind to changes to update your page).

• jQuery Ajaxy (ajax extension for jQuery History, to allow for complete ajax websites while being completely unobtrusive and gracefully degradable).