Ajax Paging - Enable Back Button

Question

Possible Duplicate:
How to: Back button support “Ajax”

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!

Paging doesn't require JQuery. Are you adding additional features by doing so? — Robert Harvey, Jul 12 '09 at 04:51
It's not about jQuery. I just need to know how I can preserve the back button when I refresh content via AJAX (such as through jQuery) — Alex, Jul 12 '09 at 04:57
Hmm... can you make use of a Command pattern here? Encapsulate your actions in a Command object and keep them in a Commands collection. Navigate back and forward through it as you handle Back and Forward in jQuery as well. Implementation wise, not too sure yet. Haven't give it a try :). — Jimmy Chandra, Jul 12 '09 at 05:26
Please check this question: http://stackoverflow.com/questions/648250/how-to-back-button-support-ajax — Amr Elgarhy, Jul 12 '09 at 21:18

geowa4 · Accepted Answer · 2009-07-12T15:18:09.063

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.

Could you add an example for this with jQuery and C#? – Alex Jul 12 '09 at 06:43 — Alex, Jul 12 '09 at 06:43

score 4 · Answer 2 · answered Jul 12 '09 at 07:01

4

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

answered Jul 12 '09 at 07:01

TheVillageIdiot

40,053
20
133
188

Wow this plugin is fantastic! – Gab Royer Jul 12 '09 at 15:28

score 1 · Answer 3 · answered Jul 12 '09 at 21:10

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

Ajax Paging - Enable Back Button

3 Answers3

Linked