History Management with AJAX

by bizamajig

HTML

<ul id="history">
    <li><a href="javascript:history.back();">Back</a></li>
    <li><a href="javascript:history.forward();">Forward</a></li>
</ul>

<ul>
    <li><a href="/link-1" class="internal">Link 1</a></li>
    <li><a href="/link-2" class="internal">Link 2</a></li>
    <li><a href="/link-3" class="internal">Link 3</a></li>
</ul>

<div id="return">
</div>

<p class="ps">Open the browser console to show error.</p>

CSS

body {
    font: normal 13px sans-serif;
    color: #333;
}

#history {
    font-size: 80%;
    margin-bottom: 30px;
    overflow: hidden;
}
#history li {
    margin-right: 10px;
    float: left;
}

#return {
    margin-top: 30px;
    background: #f7f7f7;
    font-weight: bold;
    font-size: 120%;
    padding: 20px;
}

.ps { margin-top: 20px; font-size: 70%; color: #999; }

JavaScript

function load( url ) {
    return $.ajax({
        url: '/echo/json',
        dataType: 'json',
        beforeSend: function() {
            $( '#return' ).text( 'Loading...' );
        },
        success: function() {
            history.pushState( {url: url, argument: 'xyz'}, null, url );
            $( '#return' ).text(url + '?' + 'xyz' );
        }
    });
}

$( '.internal' ).on( 'click', function( e ) {
    e.preventDefault();
    load( $(this).attr( 'href' ) );
    return false;
});

var popped = ( 'state' in window.history ), initialURL = location.href;
$( window ).bind( 'popstate', function( e ){
    var initialPop = !popped && location.href == initialURL;
alert( location.href );
    popped = true;
    if ( initialPop ) return;
        
    var state = e.originalEvent.state;
alert( state.url );    
alert( state.argument );
    if( !state ) {
        $( '#return' ).text( '' );
    } else {
        $( '#return' ).text( state.url );
    }
});