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.

lollo · Accepted Answer · 2013-08-23 21:58:42Z

1

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..

answered Aug 23, 2013 at 21:58

lollo

1651 silver badge13 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

MacK Over a year ago

The nav element is a new HTML5 tag, not really a typo in this case :)

lollo Over a year ago

i didn't know about that new tag... so if you treat it like 'div' or 'p' or like any other tag i assume that : $('nav').find('a') is the right way to code it...

MacK · Accepted Answer · 2013-08-23 22:03:41Z

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); });

Hi MacK, I have a question similar it. If I use it in one page such as: a.html?state=1 and a.html?state=2, the script will work fine. However, I use History.js in two pages such as: a.html and b.html. So, it can not run. Please help me in this question: stackoverflow.com/questions/19586033/…

Collectives™ on Stack Overflow

Getting history.js to work without Ajax loaded pages

2 Answers 2

2 Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Related