Using History API for Ajax div load

Question

In my WP site I have post content loaded into a div with ajax on a click event.
I need it now to change the url for the current post, would prefer not using hashes.
How would I implement this using my js?

JS:

    jQuery(document).ready(function() {
    jQuery('#main-content').on('click', '.page a', function(e) {
        e.preventDefault();
        var url = jQuery(this).attr('href');
        jQuery('#main-content').html('<h4>Loading...</h4>').load(url+ ' #main-content');
      });
    });

I have researched History API but I'm not sure how to implement it with my js.

Answer 1

I haven't done this yet myself, but this should be very simple using the pushState: https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history

var stateObj = { foo: "bar" };
history.pushState(stateObj, "New Page Title", "newPath.html");

Here's an extended example, where you would replace the content, path, and title with the results from your WordPress query that would grab the next post.

<!doctype html>
<html>
    <head>
        <title>Push State Testing</title>
        <script type='text/javascript'>
            var i = 1;
            function goToPage( pageNumber, pushState ) {
                var content  = "Hello World " + pageNumber,
                    path     = "hello_world_" + pageNumber,
                    title    = content,
                    stateObj = {"content":content}
                ;
                document.title = title;
                document.getElementById('content').innerHTML = content;
                if( pushState ) {
                    history.pushState({index:pageNumber}, title, path);
                }
                i = pageNumber;
            }
            function nextPage() {
                goToPage( i+1, true );
            }
            window.onload = function() {
                goToPage(1);
                history.replaceState({index:1}, "Hello World 1", "hello_world_1");
            }
            window.onpopstate = function(event) {
                goToPage(event.state.index, false);
            }
        </script>
    </head>
    <body>
        <div id='content'>Push State Testing</div>
        <button type='button' onclick='nextPage()'>Next</button>
    </body>
</html>

In answer to the question in the comments. No, you don't need to know the path of the URL until you know the content. You replace the content and do the pushState at the exact same time:

$('#mainContent').html( contentFromWp );
history.pushState( state, titleFromWp, pathFromWp );

Okay, so to take the above and try to write it for you, which I can't test, so I can't guarantee that this will be working like my above examples...it would be something like this:

jQuery(document).ready(function() {
jQuery('#main-content').on('click', '.page a', function(e) {
    e.preventDefault();
    var url = jQuery(this).attr('href'),
        title = jQuery(this).attr('title')
    ;
    jQuery('#main-content').html('<h4>Loading...</h4>').load(url+ ' #main-content');
    document.title = title;
    history.pushState({url:url,title:title}, title, url );
  });
});

window.onpopstate = function(event) {
    document.title = event.state.title;
    jQuery('#main-content').html('<h4>Loading...</h4>').load(event.state.url+ ' #main-content');
}

Note the need for onpopstate to make the back button work. You will also want to call a history.replaceState when your webpage first loads like I did in my example so that when users go back to the very first page the first page they were on will reload...otherwise, the user will only be able to go back to the second page they navigated to since going back to the first won't have a stateObj.

Using History API for Ajax div load

Question

1 answers

solution1
1 ACCPTED 2014-11-14 16:41:09

Using History API for Ajax div load

Question

1 answers

solution1 1 ACCPTED 2014-11-14 16:41:09

solution1
1 ACCPTED 2014-11-14 16:41:09