How to deal with page refresh when using HTML5 History?

Question

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.

Problem

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.

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.

The back/forward button works fine as per the history api. Help needed here, Thanks!! I am currently working on this .jsp prototype.

document.addEventListener('DOMContentLoaded', init, false);

function hasBrowserHistory(){return !!(window.history && 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('&');
for(var i = 0; i < 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 && 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 > a').click(function(e){
    e.preventDefault();
    loadPage(jQuery(e.target).attr('href'), false);
});

//Setup listeners for the history events
window.addEventListener('popstate', historyPopStateHandler);
}

Answer 1

yea guyz i heard the same problem but i fixed it... its so simple , when you hit refresh, the browser will request the page from the server and the page would not be there... to cater for this you need a .htaccess file that will be used in redirecting those requests to the respective php file... like if the url is www.you.com/coding, the .htaccess file will scan for the word coding, the redirect the request to coding.php... inside the php, you need to get the url of the request $_SERVER['REQUEST_URI'] then do some filtering... if the request satisfy the filters... have a html page embeded on that php bla.. ?>

so in the html put the values that would have appered when you loaded the form... and thats the logic i even tried it in my website deenze and it worked