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.

CodePudding user response：

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.