Uncaught ReferenceError: Pjax is not defined at MutationObserver.<anonymous>

Question

I have had to use some js code in order to make a plugin work correctly with my word press website that uses ajax to load pages. The code allows the search plugin to be used without reloading pages when clicking a result (the search uses ajax too), as before using this code ajax page loads would not happen.

The code:

        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"]  
                });
        pjax.refresh(newContent);
        
    });  
    let container = document.documentElement || document.body,
        config = { attributes: false, childList: true, subtree: true, characterData: false };
    dom_observer.observe(container, config);

This does work and search results are loaded using ajax when clicking a result. The only issue I seem to have now is when checking the chrome dev console I can see the following error many times: (index):228 Uncaught ReferenceError: Pjax is not defined at MutationObserver.<anonymous> ((index):228:14)

My js knowledge is minimal, but I have tried to define the Pjax function to remove the error without success.

I am just looking for any help I can get to fix this code and remove the error it is creating.

Thank you to any that can offer some advice.

Answer 1

There's no object called Pjax provided in the core JavaScript API. So if you're trying to use a function defined in another script make sure that the script is loaded first before you try to invoke any function from it.