David David - 2 months ago 7
jQuery Question

jQuery & history.js example

I'm having a little trouble using history.js with jQuery. I just wanted to make a navigation set work with the back button (which they do seem to be doing quite nicely). However. When I click the back button the url changes to the old (which again is good and what I want) but the content does not replace as it should.

To make this a little more understandable here's some code.

<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>


Obviously what I want is the content of the pages load into content which is done nice and easily with .load() and then I want the back button to move the backwards through them if the user uses it. At the moment the urls change but the content in the box does not. How would I go about changing / fixing that?

Answer

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>
Comments