javascript - history.js - initial page not being stored in history -

i using history.js enable back/forward browser navigation on ajax products page. ajax functionality based on clicking on product categories.

i have working quite - except there 1 issue experiencing. first page not being stored in history. here code:

html:

<ul class="category">     <li><a href="/category/5">category 5</a></li>     <li><a href="/category/10">category 10</a></li> </ul> 

js:

$(document).ready(function(){      var         history = window.history,         state = history.getstate();      $('.category a').click(function(){          var path = $(this).attr('href');         var title = $(this).next().text();         var category = $(this).attr('data-cat');          history.pushstate({category: category}, title, path);          return false;     });  });   history.adapter.bind(window, 'statechange', function() {     var state = history.getstate();     var category = state.data.category;      myajaxfunction(category); // function refreshes product container }); 

now suppose load url: //mysite/category/10

i click on category 5 - url: //mysite/category/5

i click on button - url not change , ajax function brings incorrect resultset

i did console.log , tells me "state.data.category" undefined.

it looks initial page isn't being stored in history session , have tried forcing history.pushstate on page load means 'statechange' event gets triggered on page load too, unnecessary.

has got ideas on how resolve issue?

you can call statechange event jquery the:

$(document).ready(function(){       ...      jquery(window).trigger('statechange');  });