History.JS back button doesn't quite work for first page

Question

I'm using the history.js to change the URL for the page using pushState while changing the content with ajax.

My problem is the initial page I go to doesn't work with the back button. The content is not stored or the info I used to get the content is not stored.

If I call the pushState on initialization that works, but then I somehow have two entries of that page. So when I hit back, I have to hit back again to get to the main page I came from. Don't know if that makes sense or not. Don't seem to find anything relevant to my particular case on here.

$(function() {
    var History = window.History; 
    if ( !History.enabled ) {
        return false;
    }
    if($.url().attr('fragment')){
        var url = $.url().attr('fragment').split("-");
    }else{
        var url = $.url().attr('path').split("-");
    }

    photo_ajax(url[3],url[2],url[4]); //perform ajax content update

    //initialize first page but doesn't quite work as it creates two entries
    //History.pushState({pho_id:url[3],per_id:url[2],a_id:url[4]}, "Viewing Photo", $.url().attr('path')); 

    History.Adapter.bind(window,'statechange',function() {
        var State = History.getState();
        photo_ajax(State.data.pho_id,State.data.per_id,State.data.a_id);
    });
});


$(document).ready(function(){  
    $(document).on('click', '[id^="dopho_"]', function(event){
        var id = $(this).attr("id").split('_');
        event.preventDefault();
        History.pushState({pho_id:id[1],per_id:id[2],a_id:id[3]}, "Viewing Photo", $(this).attr('href'));
    });
});

Answer 1

Well I figured out something that does work. If i use replaceState instead, then the initialize line works and the double entry doesn't seem to happen. So I will go with this for now.

$(function() {
        var History = window.History; 
        if ( !History.enabled ) {
            return false;
        }
        if($.url().attr('fragment')){
            var url = $.url().attr('fragment').split("-");
        }else{
            var url = $.url().attr('path').split("-");
        }

        photo_ajax(url[3],url[2],url[4]); //perform ajax content update

        //initialize first page but doesn't quite work as it creates two entries
        History.replaceState({pho_id:url[3],per_id:url[2],a_id:url[4]}, "Viewing Photo", $.url().attr('path')); 

        History.Adapter.bind(window,'statechange',function() {
            var State = History.getState();
            photo_ajax(State.data.pho_id,State.data.per_id,State.data.a_id);
        });
    });


    $(document).ready(function(){  
        $(document).on('click', '[id^="dopho_"]', function(event){
            var id = $(this).attr("id").split('_');
            event.preventDefault();
            History.pushState({pho_id:id[1],per_id:id[2],a_id:id[3]}, "Viewing Photo", $(this).attr('href'));
        });
    });