Ajax + back & forward buttons

Question

I'm starting to write new application and want to make it full ajax style :)

I'm using Jquery to make ajax requests. Main JS file gets some variable from pressed link and according to that link goes to some php files grabs some data comes back and puts everything in pre prepared html tags.

This is the way I see this app.

Now I've found some solutions to make back&forward buttons start working but in those solutions their script goes to predefined pages and reads some data according to some constant ID So I don't like it.

What I want is...

1. I need some code which will prevent browser from page reloading if user is pressing back,forward button
2. Remember browser position, so If we are on state 'C' and back was pressed it brings to JS some variable with value 'B', then JS goes to php and says 'B' so php will understand which content to prepare. gives content back to JS , JS updates the page, everybody happy.

Is there solution which will work this way ?

Answer 1

I've used jQuery BBQ: Back Button & Query Library in the past for just this purpose.

Specifically, the basic AJAX example looks to be what you're after. The rest of the examples are most excellent as well.

Answer 2

I think you should take a look at backbone.js http://documentcloud.github.com/backbone/. It has a router based application structure, where each route is actually a different /#'ed url.

Like this when you have an item list, you could display it in route /#itemsList, and each item details page could be on /#items/id. The entire navigation is handled for you, all you have to do is to call some functions or paste the code that you want to be ran when you get to that url. (example adapted http://documentcloud.github.com/backbone/#Router)

var Workspace = Backbone.Router.extend({

  routes: {
    "help":                 "help",    // #help
    "item/:id":        "item",  // #item/myItemId
    "itemList": "list"   // #itemList
  },

  help: function() {
    ... show help
   },

  item: function(id) {
    ... show single item with jQuery, Ajax, jQuery UI etc
  },

  itemList: function(){
    ... show item list with jQuery, jQuery UI etc.
  }

});

www.myapp.com/#help -> help code

www.myapp.com/#item/32 -> item with ID 32, which is captured in the item(id) function and a request is made to fetch the data via Ajax

www.myapp.com/#itemList -> the list of all items, where you can generate links with #item/id for each item.