Getting history.js to fire a function

Question

I want to get history.js to work on my homepage: http://www.dinomuhic.com/2010/index.php

The main javascript code of my homepage is here: http://www.dinomuhic.com/2010/js/bunch.js

My homepage is self-coded, so no cms, Wordpress or whatever. The whole site works like this: whatever you click on has an ID, this ID is being send to the sndReq function and then the content appears.

When you click for example on the "Motion" link something this is being send

javascript:sndReq('k001','Main-Menue','Menue-Open','Motion')

It's 4 vars. First the ID, then 3 vars for Google Analytics for correct tracking.

Now what I did was I linked the history.js script to my index page as you can see and I added this line into my sndReq function:

History.pushState( {state:1}, "DinoMuhic.com - "+label, "?="+req );

I did nothing more. Means I did not add any other lines of code for history.js to work.

So what already works is that it appends the correct string to the url. Clicking on the Motion button results in the URL string looking like this:

http://www.dinomuhic.com/2010/index.php?=k001

Which is good, because this is bookmarkable and sending only the ID also works and displays the right content.

And when I push the back button it also replaces the string with the one before. But what it does not do is fire the sndReq function again so the content of the last click also appears on screen. The URL string changes but not the content.

I just need to make history.js save the sndReq function calls and call them again when pressing the back or forward buttons again.

I hope I explained everything sufficently.

If it would make everything simpler for you just assume I'm just sending the ID and not the other 3 vars for google analytics, because it also does work when only sending the ID and not the rest.

Thanks in advance

Answer 1

Ok I think I figured it out.

Basically I just need this:

History.Adapter.bind(window,'statechange',function(){ 
    var State = History.getState();
    sndReq(State.data[0],State.data[1],State.data[2],State.data[3]);
});

This is how you call a function every time you press on the back button. This has to be inside the $(function (){} function, so it is active all the time.

But for the sndReq function to get all the data it needs to display the correct content I added this line to my sndReq function

var sndData= new Array(req,category,action,label);

This is just an array filled with the inputs the sndReq gets when you click on a link.

Then you give this data over to the push state command

History.pushState( sndData, "DinoMuhic.com - "+label, "?="+req);

And it works ;) I made an extra page for it to test it out, it's not yet in the live version.

Test site: http://www.dinomuhic.com/2010/index0.php