How to parse URL for page navigation when clicking the back button on single page site using ajax?

Question

I am working on this website http://techxpertschico.com which uses ajax and .htaccess to update a single index.php page, the problem is that I can't get the back button to work. For example if you click two separate top header links and then click back it will not change the content you are looking at even though the url will be updated. This is because my logic to direct the user to the proper web page happens using php but when a user clicks the back button they receive a cached copy of the page therefore no server request. In fact, you'll notice if you click refresh on my site after clicking the back button it will load the correct content because it will send out the server request. My first thought to fix this was to force a refresh when a user clicks the back button, but I couldn't get this to solve the problem. I tried using header files, I tried using javascript, and I failed, so I'm asking for help once more. I just need to be able to parse the URL and direct them to the appropriate page but normally I do this using php and since the back button uses caching I am not sure if I need a javascript solution or if I need to try harder to figure out the forced refresh approach.... What would you do, or what do other sites that use a single index.php file do?

P.S. I'll post any code if you need to see it. Looking at my question from yesterday might help. How to refresh page on back button click?

Answer 1

Your problem is not related to the cache mechanism. I've just checked your website using firebug and I have noticed that after loading the home page (without ajax), you use ajax to load requested page asynchronously and change URL in the address, the URL altering is done by your code which is ignored by firefox.

The URLs altered with code are not kept in the browser's history, this is why the Back button doesn't work in your case

Answer 2

EDITED, added own working Code example

If you are still working on this: I do suggest you take a look into this article change-browser-url-without-page-reload

I think it explains a good method which is not too complicated to make use of the HTML5 history possibilities.

---

Here's the code I finally implemented on my site, and the only issues I have is with my expandable menu states when going back in history..

HTML just uses a DIV with #content-main on your index.html, for all the external html-file contents will be loading into it. The links(anchor) which should direct to that DIV get a class assigned: ajaxLink In your referenced html-files, just write the content, no head or body. You may include scripts, though, if it makes sense to not put them on your index page.

$(function () {
//AJAX: load html-pages dynamically into this site's div (#content-main), and add browser history and URL support

    /*unnecessary? I don't use the next 3 lines of code
    //To override the default action for the link(anchor tag), use the following jQuery code snippet.
    $("a.ajaxLink").on('click', function (e) {
        //code for the link action
        return false;
    });
    */

    //Now to get the ajax content and display it and change the browser URL to the specific location without refresh use the following code.
    $("a.ajaxLink").on('click', function (e) {
        e.preventDefault();
        /*
        - if uncomment the ABOVE line, html5 nonsupported browers won't change the url but will display the ajax content;
        - if commented, html5 nonsupported browers will reload the page to the specified link.
        */

        //get the link location that was clicked
        pageurl = $(this).attr('href');

        //to get the ajax content and display in div #content-main
        $('#content-main').load(pageurl);

        //to change the browser URL to the given link location
        if(pageurl!=window.location){
            window.history.pushState({path:pageurl},'',pageurl);
        }
        //stop refreshing to the page given in
        return false;
    });

    //the below code is to override back button to get the ajax content without page reload
    //added some details from http://rosspenman.com/pushstate-jquery/ - otherwise going back in history to initial page resulted in issues
    $(window).on('popstate', function(e) {
        if (e.originalEvent.state !== null) {
            $('#content-main').load(location.pathname);
        }
        else {
            $('body').load(location.pathname);
        }
    });
});