22

I'm fairly new to programming, and I'm making an AJAX site with the help of jQuery.

I've looked around a fair bit for an AJAX history handler, and figured that History.js seems to be the best/most up-to-date.

My menu buttons each have their own unique ID's (#homeBtn, #featuresBtn, #pricingBtn), and currently look like this:

<a href="#home" class="homeMainMenuButton" id="homeBtn"><div class="homeMainMenuButtonText">Home</div></a>

Can someone give me an example (preferably on jsfiddle) on how I would implement History.js?

I can't seem to grasp any of the examples given by the author, and I simply need a dumbed down version =b

If you need any more information, please let me know, and thanks!

Prasanth
  • 2,969
  • 28
  • 44
Peter
  • 221
  • 1
  • 2
  • 3
  • 1
    I would like the browser back/forward buttons to work after clicking on one of the buttons (which in turn loads my AJAX content). Apparently history.js also allows you to bookmark the page, and refresh without any issues cross-browser. – Peter Sep 10 '11 at 01:35
  • possible duplicate of [Good tutorial for using HTML5 History API (Pushstate?)](http://stackoverflow.com/questions/4015613/good-tutorial-for-using-html5-history-api-pushstate) – Šime Vidas Sep 10 '11 at 01:39
  • 4
    I've looked at every question on stackoverflow with history.js, and the first 5 google pages, with no luck on a _simple_ tutorial/example, which your link doesn't provide either =( I feel pretty dumb considering I've spend around 6 hours trying to figure it out without success... – Peter Sep 10 '11 at 01:41
  • 1
    Have you checked out [jQuery BBQ](http://benalman.com/projects/jquery-bbq-plugin/)? – Clive Sep 10 '11 at 01:42
  • I did take a quick look, but it seemed fairly old as there hasn't been any updates since 2010. Reading the comments and seeing how many there are recently with the author still replying to them, I will give it a second look and see if I can get it working. – Peter Sep 10 '11 at 01:50
  • @Clive jQuery BBQ doesn't support the HTML5 History API to my knowledge. – balupton Sep 10 '11 at 05:24
  • Checkout this video. There is a lot of stuff not about history.js, so skip to 51:00 for the history.js stuff. It is a very quick demo of how to consume history.js. The rest of the video is really cool too if you are interested in single page application design. http://channel9.msdn.com/Events/TechDays/Techdays-2012-the-Netherlands/2159 – Jeremy Armstrong Feb 23 '12 at 21:12

2 Answers2

11

Follow the instructions here: https://github.com/browserstate/ajaxify

Change your links to traditional links href="#home" to href="/home" - make sure http://mywebsite.com/home works. This is all about graceful up-gradation.

balupton
  • 42,415
  • 27
  • 116
  • 167
5

I think the "dumbed down" version you need is a router abstraction. I've written a simple one for my own purposes, called StateRouter.js. It basically takes care of directing URLs supported by your application to the correct functions, you can even define parameter parts of routes (so that e.g. the 'id' part of http://example.com/persons/id becomes a function parameter).

This simple example code should demonstrate how it's used:

var router = new staterouter.Router();
// Configure routes
router
  .route('/', getHome)
  .route('/persons', getPersons)
  .route('/persons/:id', getPerson);
// Perform routing of the current state
router.perform();
// Navigate to the page of person 1
router.navigate('/persons/1');

Here's a little fiddle I've concocted in order to demonstrate its usage.

aknuds1
  • 57,609
  • 57
  • 177
  • 299