Member Avatar for 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

  • 3 Contributors
  • 3 Replies
  • 751 Views
  • 6 Days Discussion Span
  • Latest Post Latest Post by diafol
Member Avatar for diafol

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.

Edited by diafol
Member Avatar for diafol

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

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.