how to use HTML5 history api or history.js with ajax loading pages

[Aqeel_1]

i have a music site where i used ajax with server side php to load pages dynamically to prevent reload. this function works with different directories that are contains pages and also uses hash to show pages urls but i have one issue and that is my back and forward buttons on browser didn't browse through pages and its really awkward! i heard about html history api and also a plugin on that history.js but unfortunately couldn't figure out how these will work. please don't guide me to guides ans manuals because i already tried all those with no success, below is the code code that is currently i am using if anybody can modified it so it starting working with back and forward buttons support either using HTML5 history api or history.js which is again a history api plugin. any help will be really appreciated. this is my navigation menu.

<nav> <ul id='menu' class="menu-items"> <li><a  href="#Browse_Page0" class="active"><i class="arcd-archive"> </i></br>Browse</a></li> <li><a href="#Top_albums_Page0"><i class="arcd-music97"></i></br>Top albums</a></li> <li><a href="#Top_artists_Page0" ><i class="arcd-microphone52"></i></br>Top artists</a></li> <li><a href="#Top_lists_Page0" ><i class="arcd-numbered8"></i></br>Top lists</a></li> <li><a href="#Charts_Page0" ><i class="arcd-rising9"></i></br>Charts</a></li> </ul> </nav>

and this is ajax jquery function

  $(function () {
  $('nav ul#menu a').on('click', function () {
    var linkClicked = $(this).attr('href');
    var data = {
        page      : linkClicked.replace(/\D/g, ''),
        directory : linkClicked.replace(/(_Page(.*)|#)/g,'')    
    }

    $("nav ul#menu a").removeClass("active");
    $(this).addClass("active");
    $('#loading').css('visibility', 'visible');

    $.post('load.php', data, function(msg) {
        $('#Home_page-content').html(msg);
        $('#loading').css('visibility', 'hidden');
        $('#Home_page-content section').hide().fadeIn(1000);

     }, '');
   });
 });

and load.php on server side that used by above function.

 <?php
 $page = filter_var( $_POST['page'], FILTER_VALIDATE_INT);
 $dir  = filter_var( $_POST['directory'], FILTER_SANITIZE_STRING);
 if ( $page !== false && $dir !== false ) {
 $link = $dir . '/' . $dir . '_Page' . $page . '.php';
 if ( file_exists( $link ) ) {
    echo file_get_contents( $link );
 } else {
    echo 'There is no such page!';
  }
 }
?>

i will very much appreciate any kind of help. thanks

The history.js is a very nice wrapper for the History API. It has great fallbacks for HTML4 browsers - all the way back to IE6.

In your case, you're loading entire pages or just small sections? If you're loading entire pages, then Ajax is a little pointless IMO. OK, perhaps you have a banner and maybe a bit of static furniture, but those things should be cached anyway and should load v. quickly. This simplifies things considerably with regard to history and urls.

If you're using this to update or load a specific area of the page, then possibly something like history.js would be useful.

Having read the documentation:

https://github.com/browserstate/history.js

I fail to see which aspect of this you're having difficulty with. You say you don't want to be pointed to resources, but the code you provide is not really sufficient to help you properly. If you want to use the History API properly and robustly with Ajax, then you need a robust solution, e.g. history.js

i heard about html history api and also a plugin on that history.js but unfortunately couldn't figure out how these will work. please don't guide me to guides ans manuals because i already tried all those with no success

Creating a novel history handler for you is way beyond a forum post. If you don't understand ALL OF the manuals, I fail to see how you're going to understand anything we create for you.

I see you're a first time poster - so here it is - this is primarily a learning platform. It is not a clone of SO. It would be useful if you downloaded/installed history.js and used it in conjunction with your site and reported back with any problems.

[gentlemedia]

Here's another one which polyfills all the way down to IE6 (as hashbang URLs) if you want.

https://github.com/devote/HTML5-History-API

Demo:
http://docs.spb-piksel.ru/demos/history/

Not sure about the demo page GM - seems to redirect to a russian forum