3

I'm trying to make a dynamic website using ajax. At this point, it's kind of like a single page where a main div is refreshed after an ajax call using jQuery. The problem I'm having at this time is that by doing this:

  1. the back button doesn't work as a user would expect.
  2. A user couldn't bookmark a certain page of results.

I guess I could do call through ajax to another php which would refresh the page and have the a new URL and header. The problem I have is that I'm not a big fan of full page refreshes.

What I would like, at minimal, is a site where the header is static and the content is dynamic but where the back button works and a user could bookmark the page.

I apologize if this isn't clear but hopefully I can explain further based on any questions.

Brett Gregson
  • 5,867
  • 3
  • 42
  • 60
complexenigma
  • 93
  • 6
  • I did find this page which somewhat explains it but I don't know how to handle when a user performs a search. http://stackoverflow.com/questions/668431/how-does-facebook-keep-the-header-and-footer-fixed-while-loading-a-different-pag – complexenigma Dec 22 '12 at 17:44
  • 2
    numerous plgins to help...address.js, history.js, jquery bbq etc. Google search `ajax bookmark` – charlietfl Dec 22 '12 at 17:44
  • I would suggest you take a look at backbone.js for example. – Benjamin Paap Dec 22 '12 at 17:45

2 Answers2

0

You can push/pop page state using HTML5's history api. This article should help point you in the right direction.

Jason Whitted
  • 4,059
  • 1
  • 16
  • 16
0

You may be able to achieve what you want to do by using the page anchor tag. When you've done your ajax refresh, redirect your page to an anchor tag, 

// Possibly using
window.location.href = "yourpage.html#myanchortag"

it doesn't really matter where, all your trying to do is make your back button work.

If that doesn't work, embed a hidden iframe. The back button will work for each time the iframe has changed.

With html5 though and newer browsers I think you might be able to manipulate the back button history natively. Don't quote me on that.

Personally I use Google's closure library and they have a whole bunch of library code to do just this. It might be worth looking into how they do it.

You can find there source code and documentation on it here

https://closure-library.googlecode.com/svn-history/r4/trunk/closure/goog/docs/class_goog_History.html

Theres a few ideas and places to get you started.

Ally
  • 4,894
  • 8
  • 37
  • 45