History API and History.js Back Button issue

Question

I am loading the page via Ajax. When the user clicks a link the page is being loaded AJAX successfully, but when the user click the back button the pages reloads the initial page. so the scenario is this.

1. Load the initial page(index.php)
2. User Clicks on the link
3. The Page loads Successfully
4. Clicks the Back button
5. The initial page is now being shown twice.

Here's the mark up.

    $(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);
            });

            $('a').click(function(evt) {
                evt.preventDefault();
                History.pushState(null, $(this).text(), $(this).attr('href'));
                alert(State.url)
            });
        });

THis is the markup

   <div id="wrap">
            <a href="page1.html">Page 1</a>
        </div>

        <div id="content">
            <p>Content within this box is replaced with content from
                supporting pages using javascript and AJAX.</p>
        </div>

IF you still do not get my question or the scenario

Here's the complete scenario. Initial Page

When the User Clicks the link the selected page loads successfully

When I click the back button the initial page is now doubled

As you can see the "Page1" link is doubled. Is this a browser issue? or my understading of the history api is something lacking or missing? What is the possible solution for this?

Answer 1

If you construct your site to use a similar template for both the main pages as well as the content pages, you could use the container selector syntax for jquery.load:

// See: http://api.jquery.com/load/
$('#result').load('ajax/test.html #container');

Which in your case would result in:

$('#content').load(State.url + ' #content');

This will have the added benefit that the content url pages are accessible directly as well without adding to much tricks.

Answer 2

This might happen because when you navigate backwards it will fire 'statechange' event, and in your callback you are loading a content of that page with the given url: $('#content').load(State.url);, so when, say, you are navigating backwards to the / URL it will load content of that index page and place it inside your container, so your mark up will actually look like this:

<div id="wrap">
        <a href="page1.html">Page 1</a>
</div>

<div id="content">
    <div id="wrap">
        <a href="page1.html">Page 1</a>
    </div>

    <div id="content">
        <p>Content within this box is replaced with content from
            supporting pages using javascript and AJAX.</p>
    </div>
</div>

There are several ways to solve this problem - the simplest one is just to detect if user navigated to the initial page and do not load this page through ajax, but insert predefined content. You can also detect on the server side if the request was made through ajax and then return only the content needed to update your page (which in your case may be <p>Content within this box is replaced with content from supporting pages using javascript and AJAX.</p>)