i load my content on my site in a div called #container with JQuery/Ajax. I have to different types of of links:
- normal anchor-links
- JQuery-Triggers which fire an event when clicked on a specific div.
Now i want to add functionality to support back and forward browser-buttons and bookmark functionality. I came across history.js, but i have a few problems with it and can't find a really easy tutorial how to use it properly.
My links:
<a href='#imprint' class='link_imprint'>Imprint</a> I read that it is better for SEO to use <a href="imprint/" ... but that URL would not be found on my server. So my first question is, how i can ensure that myurl.com/imprint is working and does not result in a 404-page?
Coming to history.js... At the moment i included the following code in my index.php right behind the <body>
<script> $(document).ready(function(){ (function(window,undefined){ // Prepare var History = window.History; // Note: We are using a capital H instead of a lower h if ( !History.enabled ) { // History.js is disabled for this browser. // This is because we can optionally choose to support HTML4 browsers or not. return false; } // Bind to StateChange Event History.Adapter.bind(window,'statechange',function(){ // Note: We are using statechange instead of popstate alert("state"); var State = History.getState(); // Note: We are using History.getState() instead of event.state }); History.Adapter.bind(window,'anchorchange',function(){ }); var currentState = History.getState(); var currentUrl = currentState.url; var urlParts = currentUrl.split('#'); $('#container').load('templates/'+ urlParts[1] +'.php'); $('#footer.credits').on('click','.link_imprint',function() { var currentUrl = $(this).attr('href'); var urlParts = currentUrl.split('#'); History.pushState(null,null,currentUrl); $('#container').load('templates/'+ urlParts[1] +'.php'); }); })(window); }); With this code, after clicking the link the URL changes to: myurl/#imprint and imprint.php is loaded in the container.php. But when i now click the back-button the URL changes, but the content is still the one from the imprint. How can i ensure that the container refreshes with the old content? I think i forgot something, but i don't know what i should do. I tried it with statechange/anchorstate but none of both events will be fired when i click the back-button.
Thanks for helping me out.
P.S: I added an alert to the state change-event, but it will never be fired. That can't be correct, right? I can see the anchorchange-event fires, when i click on the link and the url changes to myurl.com/#imprint...
