jQuery & history.js example

Try the following:

<ul class="content_links">    <li><a href="/historyapi/pages/content_page_1.html">Content page 1</a></li>    <li><a href="/historyapi/pages/content_page_2.html">Content page 2</a></li>    <li><a href="/historyapi/pages/content_page_3.html">Content page 3</a></li>    <li><a href="/historyapi/pages/content_page_4.html">Content page 4</a></li>    <li><a href="/historyapi/pages/content_page_5.html">Content page 5</a></li></ul><div id="content">    <p>Content within this box is replaced with content from supporting pages using javascript and AJAX.</div><script>$(function() {    // Prepare    var History = window.History; // Note: We are using a capital H instead of a lower h    if ( !History.enabled ) {         // History.js is disabled for this browser.         // This is because we can optionally choose to support HTML4 browsers or not.        return false;    }    // Bind to StateChange Event    History.Adapter.bind(window,'statechange',function() { // Note: We are using statechange instead of popstate        var State = History.getState();        $('#content').load(State.url);        /* Instead of the line above, you could run the code below if the url returns the whole page instead of just the content (assuming it has a `#content`):        $.get(State.url, function(response) {            $('#content').html($(response).find('#content').html()); });        */        });    // Capture all the links to push their url to the history stack and trigger the StateChange Event    $('a').click(function(evt) {        evt.preventDefault();        History.pushState(null, $(this).text(), $(this).attr('href'));    });});</script>

it seems the following bit doesn't work:

$.get(State.url, function(response) {  $('#content').html($(response).find('#content').html());});

You have to convert the 'response' into a dom element before you can use 'find' on it. Like so:

$.get(State.url, function(response) {    var d = document.createElement('div');    d.innerHTML = response;    $('#content').html($(d).find('#content').html());});