When load page with Ajax, the go back button doesn't works

user_11586487 0
Viewed 278

I'am trying to create a website where all pages are called with Ajax. When I click on any link on the page, the url and page content changes without refreshing all page (similar Facebook). So far everything is fine.

The problem is : When I click the go back or go forward button, the url changes but the page content does not change.

Example code :

function loadDoc($link) {  // example for $link : /example.php
        var xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                var parser = new DOMParser();
                var doc = parser.parseFromString(xhttp.responseText, "text/html");
                var elem = doc.getElementById("content");
                document.getElementById("content").innerHTML = elem.innerHTML;
            }
        };
        xhttp.open("GET", $link, true);
        xhttp.send();
        window.history.pushState('', 'Settings', $link);  // dynamic url changing 
    }

(Fully separate structure or additional ideas are welcomed too)

xmlhttprequest ajax javascript
1 Answers

You've used pushState to add an entry to the browser history, but you haven't added an event handler to determine what happens when the browser navigates back. The browser won't automatically memorise the state of the DOM for you.

Here is a simple example:

<div id="content">1</div>
<button>1</button>
<button>2</button>
<button>3</button>
<button>4</button>

<script>
    const div = document.querySelector('div');

    addEventListener('click', event => {
        if (event.target.tagName.toLowerCase() !== 'button') return;
        const last = div.textContent;
        const next = event.target.textContent;
        div.textContent = next;
        history.pushState({ value: next }, `Page ${next}`, `/page/${next}`);
    });

    addEventListener('popstate', event => {
        let state = event.state;
        if (state === null) {
            // special case: This is the state before pushState was called
            // We know what that should be:
            state = { value: 1 };
        }
        div.textContent = state.value;
        console.log('location: ' + document.location + ', state: ' + JSON.stringify(event.state));
    });
</script>
Dorward_190680
Related