Okay, that’s great.
Try adding this line:
document.body.click();
..after this line:
pjax.loadUrl(a.getAttribute('href'));
..in the code. That will trigger a shadow click on the document, which the plugin should detect as a loss of focus, and close the results.
Best,
Ernest M.
Hello,
Sorry I am not sure if I am missing something but there is no line:
pjax.loadUrl(a.getAttribute('href'));
that I can add this after:
document.body.click();
Is this line:
pjax.loadUrl(a.getAttribute('href'));
supposed to be in the code that you provided me?
Edit: I see that you are referring to the very fist code snippet that you provided, but I am not using that code. But I will try to modify the second code to contain these lines and hope I do it correctly 😛
Thanks.
Sorry, I was looking at the wrong code.
Try this:
jQuery('.asl_r .item').off('click.body').one('click.body', function(){
document.body.click();
});
..after this:
pjax.refresh(newContent);
So the full code should look something like this:
add_action('wp_footer', 'asl_custom_pjax');
function asl_custom_pjax() {
?>
<script>
let dom_observer = new MutationObserver(function(mutation) {
if ( typeof Pjax != 'undefined' ) {
let newContent = document.querySelector(".asl_r");
let pjax = new Pjax({
elements: "a", // default is "a[href], form[action]"
selectors: ["#content"]
});
pjax.refresh(newContent);
jQuery('.asl_r .item').off('click.body').one('click.body', function(){
document.body.click();
});
}
});
let container = document.documentElement || document.body,
config = { attributes: false, childList: true, subtree: true, characterData: false };
dom_observer.observe(container, config);
</script>
<?php
}
Not a problem.
That is it! It works perfectly.
Thank you very much for all of your help it is very much appreciated 🙂
Hello,
Sorry to bother you again. I have come across an issue that happens when using the code to prevent page reloads when using the search.
What happens is after navigating the site and hitting the back button, the previous page will load but seems to reload a few times. The more you navigate around the site and go back the worse this gets and you end up watching the page load endlessley.
Just wondered if you know why this happens when using the code or if I can stop it?
I have contacted the theme dev too just in case.
The complete code is:
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"]
});
pjax.refresh(newContent);
jQuery('.asl_r .item').off('click.body').one('click.body', function(){
document.body.click();
});
}
});
let container = document.documentElement || document.body,
config = { attributes: false, childList: true, subtree: true, characterData: false };
dom_observer.observe(container, config);
Thanks for any advice you can provide.
Hi!
Sorry for the late response.
I honestly don’t know what exactly causes the behavior, this code should not be executed on browser pop state events (back button), but that would have to be debugged directly.
I can only assume, that the two independent Pjax instances may not like each other (and creating duplicated push states), and probably should be forged into one. That is only possible via directly editing the theme code, where the original ajax loader code is implemented.
And this is only an assumption, the issue could be something else as well. Browser popsate problems are very hard to debug properly, as each browser can act differently.
Best,
Ernest M.
Hello,
No worries at all. I appreciate the help so far!
Thanks for the info, at least it gives me a possible direction to go in.
I noticed on your website you do custom work/jobs, would this be something you would be interesting in looking into/resolving on a custom job at all?
Thanks.
Hello,
I spoke to the theme dev and he said this:
What’s this js for? I see you want to refresh the .asl_r content and enable ajax in it’s a link. if so, you just need trigger refresh jQuery(document).trigger(‘refresh’); to update the new added content with ajax.
Is it possible to implement this into the search form, instead of the js code you provided?
Update:
The developer of the theme and they clarified this.
OK, You want to apply pjax on the a link in the search result. you just need call jQuery(document).trigger(‘refresh’); when get search result.
So you need ask the plugin author if there is a event that you can call when result added into the page.
Does a function exist that I could use?
Thanks.
Thanks! I don’t think that would work in this case, as the original Pjax configuration does not extend to the changes in the document body, but to a container within the document body – and the search results container is not part of that element. Triggering a refresh therefore should not do anything.
Based on his advice, this should work:
(function($){
$('.asl_m').on('asl_results_show', function(){
jQuery(document).trigger('refresh');
});
})(WPD.dom);
I suspect it will not, but worth a try.
Best,
Ernest M.
It works!!
I can navigate back, the ajax is used when clicking a result. Brilliant!
The box isn’t vanishing when clicking the result though.
My very last question..
Can this be implemented with the above new code?
jQuery('.asl_r .item').off('click.body').one('click.body', function(){
document.body.click();
});
I think so, try this instead of the previous code:
(function($){
$('.asl_m').on('asl_results_show', function(){
jQuery(document).trigger('refresh');
$('.asl_r .item').on('click', function(){
ASL.api(0, 'hideResults');
});
});
})(WPD.dom);
Perfect that also works.
Edit: Sorry ignore that, I figured it out. I still had the javascript source set to legacy on one of the websites.
Thank you so much for the help with this! 🙂
