title: How to deal with page refresh when using HTML5 History?
body: <p>I have read through tons of tutorials and examples to no avail which leads me to ask my question here. I am developing a webpage with a fixed side navigation with a dynamic content div. </p>
  
  <p><strong>Problem</strong></p>
  
  <p>When i click on a link let's say 'load', the content div will display the content from my other page 'loadcourses.php' then using the history api i will change the url to 'http://mydomain.com/main.php?page=loadcourses'. Basically the main.php will not change i will just add the title of the other page and tag it as a parameter behind the link.</p>
  
  <p>Next, from the dynamically loaded content, i have some links to show the content of each individual course when clicked. The crucial part lies here, once i clicked on any link, i am supposed to parse another parameter to the next page which is 'course.php'. I have set my  href='http://mydomain.com/course.php?cid=CSC101'. Now i have no problem loading the first time with the dynamic div loading the content and successfully retrieving the id CSC101 at the next page. But when i hit refresh, my cid is lost.</p>
  
  <p>The back/forward button works fine as per the history api. Help needed here, Thanks!! I am currently working on this .jsp prototype.</p>
  
  <pre><code>document.addEventListener('DOMContentLoaded', init, false);
  
  function hasBrowserHistory(){return !!(window.history &amp;&amp; history.pushState);}
  function updateHistory(url, replaceHistory) {
  //Create a page path
  var path  = "?page=" + url.split(".")[0];
  var object = {
          data: url
      };
  
  if(replaceHistory){
      //alert('as');
      /* 
      If this is the first page we are loading
      replace the current history item.
      */
      history.replaceState(object, null, path);
  }else{
      //alert('qw');
      /*
      If we got here by clicking one of the links
      add a new item to the browser history
      */
      history.pushState(object, null, path);
  }
  }
  
  function loadPage(whichPage, replaceHistory) {
  $('#contentCol').load(whichPage);
  updateHistory(whichPage, replaceHistory);
  }
  
  function historyPopStateHandler(e) {
  //var state = history.state;
  if (e.state == null) {
      alert(e.state.url);
  }
  if(e.state != null) {
      loadPage(e.state.data, true);
  }
  }
  
  function getUrlVars() {
  var vars = [], hash;
  var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&amp;');
  for(var i = 0; i &lt; hashes.length; i++)
  {
      hash = hashes[i].split('=');
      vars.push(hash[0]);
      vars[hash[0]] = hash[1];
  }
  return vars;
  }
  
  function init() {
  //Check if the history API is available
  if(!hasBrowserHistory()){
      alert('Sorry dude, your browser does not support the history API');
      return;
  }       
  
  //Check if we have any url params (e.g bookmark or reload)
  var params = getUrlVars();
  
  if(params['page'] != undefined &amp;&amp; params['page'] != null){
      //Load the holder page with the correct content
      loadPage(params['page'] + ".jsp", true);
  }else{
      //Load the default page
      loadPage('loadcourses.jsp', true);
  }
  
  
  //Setup listeners for the links
  jQuery('nav &gt; a').click(function(e){
      e.preventDefault();
      loadPage(jQuery(e.target).attr('href'), false);
  });
  
  //Setup listeners for the history events
  window.addEventListener('popstate', historyPopStateHandler);
  }
  </code></pre>