Getting history.js to work without Ajax loaded pages

Question

I don't know why this isn't working and I've been trying everything.

Most of the tutorials online are using Ajax which I'm not and I've tried adapting it but I can't get anything to work. I'm using has bang urls and all the content is loaded in the index page it's just being shown and hidden dynamically. I could really use some help getting the history working.

Here is my script...

History.Adapter.bind(window, 'statechange', handleStateChange);
$('nav a').on('click',function(e) {
    var target = $(this).attr('href');

    History.pushState(null, null, target);
});

function handleStateChange() {
    alert("State changed...");
}

If I could just get the alert to happen I can go from there but the alert never fires and I don't know why.

Answer 1

Just define your function before binding the event, in this way:

function handleStateChange() {
    alert("State changed...");
}
History.Adapter.bind(window, 'statechange', handleStateChange);
$('nav a').on('click',function(e) {
    var target = $(this).attr('href');

    History.pushState(null, null, target);
});

Or much better as I like usually to do, define the function inside the bind, of course if you don't need to use the same function later in the script.

History.Adapter.bind(window, 'statechange', function() {
    alert("State changed...");
});

$('nav a').on('click',function(e) {
    var target = $(this).attr('href');

    History.pushState(null, null, target);
});

Answer 2

i think that "$('nav a')" is a typo in the code you have posted, it should be:

....
$('#nav a').on('click',function(e) {
var target = $(this).attr('href');
....

In this FIDDLE i assume that you want use a tag div with "nav" as id attribute and some links inside of it Hope it helps..