Ajax Paging - Enable Back Button

Question

Hello, I have a ASP.NET MVC implementation in which I get partial views via jQuery for things such as paging and filtering. The problem is though that I break the browser's back button by doing so. How can I restore back button behavior (rewrite the URL without refresh using pound? Not sure how that works though, and how to re-fetch data when the back button is triggered.)

Thank you for your help!

Answer 1

As you know, javascript paging kills the back button. But it also kills the ability to link to a given page. To avoid page reloading, but maintain the back button, you are going to need to use # in the URL. Then you will be able to use the back button (and link directly to a page), but you are going to need to parse the URL when the page loads, moving the page to the correct one.

EDIT:

Get the URL:

var baseURL = location.href.slice(0, location.href.indexOf('#'));

Then add to the URL with your new resource:

location.href = baseURL + '#page2';
//you'll probably want to figure out the page number programatically

But don't forget going to the right resource on load:

$(goToResource);
function goToResource() {
    var hashURL = location.href.slice(location.href.indexOf('#'));
    //you AJAX code to load the resource goes here
}

Of course, you could probably find a plugin to do this all for you.

Answer 2

Try using jquery.history plugin. It can nicely accomplish what you want.

Answer 3

Please have a look at Adding Browser History Support at this page

The article does not mention that this does not work for IE out of the box. You will need to include an iframe in you page to get it working with IE.

<iframe id="__historyFrame" style="display:none;" ></iframe>

I only checked in IE7 and Firefox. Given the not documented issue with IE I am not confident that it will work across a wide range of browsrs

Answer 4

Please check this question:

http://stackoverflow.com/questions/648250/how-to-back-button-support-ajax