Stop infinite page reload when navigating back using ajax


I have posted this to stack overflow, but have had no response :frowning: so hopefully someone here may be able to help :slight_smile:

I am using Wordpress along with an ajax theme and I am also using an ajax search plugin.

In order to stop the page being reloaded and continue to use ajax when clicking a search result in the ajax search I have been provided with the following code:

    let dom_observer = new MutationObserver(function(mutation) {
    if ( typeof Pjax != 'undefined' ) {
        let newContent = document.querySelector(".asl_r");
        let pjax = new Pjax({
                   cacheBust: false,
                   elements: "a", // default is "a[href], form[action]"
                   selectors: ["title", "#header nav", "#aside", "#footer", "#content"] 
        jQuery('.asl_r .item').off('click.body').one('click.body', function(){
let container = document.documentElement || document.body,
    config = { attributes: false, childList: true, subtree: true, characterData: false };
dom_observer.observe(container, config);

This works fine, but I have an issue that occurs if you navigate to a page and then hit the back button in a browser

When using the back button the previous page will load ok, but will start to infinitely reload.

If I remove this code I can navigate back fine with no reloading taking place.

I have tried removing cacheBust thinking this could be having an effect, but this makes no change.

If someone with knowledge of js/ajax could provide any advice it would be much appreciated.


Could you perhaps share a minimal reproduction?

Sorry, sure can.

Here is a demo site with the setup as above, you will see if you press back from any page the reloading goes a little crazy.

Removed url

Thank you

I guess the reproduction didn’t help?

Please close this, as it appears it will not be getting answered :frowning:

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.