I'm hoping I can get some help with the history.js plugin. I've tried numerous examples on stackoverflow and github to try to get it working but can't for the life of me..
What I'm trying to achieve:
My outputted html:
<a href="http://example.com/article/this-is-the-article-name" data-href="http://example.com/article/ajax/this-is-the-article-name" class="ajax-click"></a>
<div id="panel" class="hidden"></div>
My javascript I have attempted:
$(document).ready(function(){
var History = window.History,
State = History.getState();
// not sure if this was doing anything to prevent clicks $('.ajax-click')[0].onclick = null;
$('.ajax-click').live('click', function(e) {
e.preventDefault();
var path = $(this).attr('data-href');
var title = $(this).attr('title');
History.pushState('ajax',title,path);
if ($('#panel').hasClass('hidden')) {
$('#panel').slideToggle(500);
$('.header').slideToggle(600);
}
});
// Bind to state change
// When the statechange happens, load the appropriate url via ajax
History.Adapter.bind(window,'statechange',function() { // Note: Using statechange instead of popstate
load_ajax_data();
});
function load_ajax_data() {
State = History.getState();
$.post(State.url, function(data) {
$("#panel").html(data);
});
}
});
I have the jQuery library and the bundled html4 + 5 history plugin above this. I'm wondering if because I am outputting the full url and not something like "/article/article-name" it might be causing issues.
Any help would be greatly appreciated, even if it's just part of it. Thanks!