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.