Let’s say I have a URL: http://example.com/person/list
This website will display a list of people. The list of people get very long, so eventually I build in pagination. Let’s say 10 people per page. The URL looks something like this:
http://example.com/person/list?page=2
If I click the next page link, I will be taken to page 3:
http://example.com/person/list?page=3
This is good because if I copy and paste the URL to a friend, she will be directed to page 3 immediately.
Let’s say that I now incorporate AJAX, and the page requests are ajax calls using jQuery. The original URL is http://example.com/person/list and when a user clicks on the next page link, the URL in the address bar doesn’t change.
This is bad because if I’m on page 3, the URL in the address bar doesn’t reflect this anymore.
There are multiple jQuery history plugins which will change the URL, however, these will ONLY change the portion of the URL which is after the hash mark #. Information after the hash mark is not sent to the server.
If I’m using a history plugin, the URL can be changed to http://example.com/person/list#page=2
My problem with this approach is: If someone copies and pastes this URL to a friend, when the friend requests this URL, I have no idea which page the user is intending to look at. Therefore, my best approach is to load all of the people entries onto the page, and have javascript select which page to display based on the information after the hash mark. This is a problem because I started to paginate the pages to reduce the amount of information being pulled back from the server in the first place!
What options do I have, such that I can have the back button be usable with Ajax, but also have bookmarkable links which do not require me to get all info from the server.
As I recently learned from my question you have to check the hash-part of the url after the ‘friend’ opened the link and fetch the content using ajax.
Or you can rewrite it on the server-side to http://example.com/person/list?page=2