Need help understanding how to ajaxify a web site

Question

I recently found this gist on how to Ajaxify a Website with the HTML5 History API using History.js, jQuery and ScrollTo: https://github.com/browserstate/ajaxify

I am hav

Answer 1

There are a variety of things you would need to do given those requirements. Here is a function you can use:

function doAjax(htmlpage){
$.ajax({
    url:"/"+htmlpage, 
    type: 'GET',
    success: function(data){
        $('#content').html(data)
    }
});
}

The the simplest way to hook this out would be to adjust your tags above to be like:

It would however be slightly more "correct" (though functionally the same) to do this with jquery in a script tag at the top:

$(function () {
    $('#buttonid1').click(function(){doAjax('work.html')});
    $('#buttonid2').click(function(){doAjax('about.html')});
    $('#buttonid3').click(function(){doAjax('contact.html')});
});

Note in both cases, these "work.html" pages shouldn't be full html documents, they should just be what goes in your content div.

This ajax will do nothing to change the url that your visitor sees. To get that to work, you'll have to use the html5 history api. It is quite a bit more complicated than the the ajax request I have above. So if you don't have a full mastery of what I wrote above, it may or may not be appropriate.