Stop page reload on ajax theme when loading result

Hi,

I’m afraid that has to be custom coded, there is no other way around it. The same event handler has to be applied to the search results displyed via Ajax Search Lite to prevent the redirection and handle the live loading.

Best,
Ernest M.

Oh that really is a huge shame.

I thought I could apply the ajax to the a tags on the search results to fix maybe.

I will have to look for a new search plugin if it isn’t possible without a lot of coding ??

Thanks.

You are very welcome, I’m sorry I could not help.

It is very likely, that this will have to be custom coded for any 3rd party search plugin too – depending on how the original event handler is coded. You may get lucky, so definitely try some, but these type of handlers are usually coded specifically for that theme output structure.
I’m guessing, that the issue has something to do how the results “float” over the content. It is an element appended at the end of the pager body part, and if the ajax theme handler is coded to a child element within the body, it will not “pick” it up.

I will try my luck, if not I will have to revert to a non ajax search that takes the user to the normal search page as this will work with ajax.

Here is my url in case I did not explain properly and it could work: https://ukradio.live the search is in the top bar. I think you are right though ??

Thanks! That looks like it uses a library called “pjax”. I quikcly looked at their API, there may be a way around it.

Try adding this code to the functions.php file in your theme/child theme directory – make sure to have a full server back-up first for safety. For more details you can check the safe coding guidelines.

add_action('wp_footer', 'asl_custom_pjax');
function asl_custom_pjax() {
	?>
	<script>
	let dom_observer = new MutationObserver(function(mutation) {
		console.log('function called');
		document.querySelectorAll('.overlap').forEach(function(el){
			el.addEventListener('click', function(e){
				e.preventDefault();
				e.stopImmediatePropagation();
				let a = el.closest('a'),
					pjax = new Pjax;
				pjax.loadUrl(a.getAttribute('href'));
			});
		});
	});
	let	container = document.documentElement || document.body,
		config = { attributes: false, childList: true, subtree: true, characterData: false };
	dom_observer.observe(container, config);
	</script>
	<?php
}

If all goes well, this should register the click event on the results to do a redirection.

Thank you very much for this.

I have just added it and it is so close now!

The results do not cause the page to reload when clicking but it seems to be adding a strange addition to the end of the URL’s and the page doesn’t actually update but the address bar does.

Does this mean I am out of luck?

Thanks again.

Hm, maybe a different approach:

add_action('wp_footer', 'asl_custom_pjax');
function asl_custom_pjax() {
	?>
	<script>
	let dom_observer = new MutationObserver(function(mutation) {
		let newContent = document.querySelector(".asl_r");
		let pjax = new Pjax({
                   elements: "a", // default is "a[href], form[action]"
                   selectors: ["#content"]
                });
		pjax.refresh(newContent);
	});
	let	container = document.documentElement || document.body,
		config = { attributes: false, childList: true, subtree: true, characterData: false };
	dom_observer.observe(container, config);
	</script>
	<?php
}

Excellent that works!

The weird addition of “?t=1652433385086” is still added to the URL but the page loads, the results overlay of the search box also does not close.

Just realised the ?t=1652433385086 url addition is on all pages no matter if in the search or clicking a menu item, in case this helps.

Do you think these things can be fixed maybe?

If not I can deal with it working like this, at least it works ??

Thanks so much!

• This reply was modified 2 years, 9 months ago by chickendipper.

Well, the URL I don’t know unfortunately, that is something else.

To close the box as well, try maybe this:

add_action('wp_footer', 'asl_custom_pjax');
function asl_custom_pjax() {
	?>
	<script>
	let dom_observer = new MutationObserver(function(mutation) {
		let newContent = document.querySelector(".asl_r");
		let pjax = new Pjax({
                   elements: "a", // default is "a[href], form[action]"
                   selectors: ["body"]
                });
		pjax.refresh(newContent);
	});
	let	container = document.documentElement || document.body,
		config = { attributes: false, childList: true, subtree: true, characterData: false };
	dom_observer.observe(container, config);
	</script>
	<?php
}

Hi,

The box remains open for some reason, I tried changing the selector but no luck. I will keep playing with this.

The URL only appends to the URL with this function added, which is really strange.

Thanks for your help.

I found something relating to the URL addition, this might shed some light.
In Chrome console:

Uncaught ReferenceError: Pjax is not defined
at MutationObserver.<anonymous> (?t=1652434722411:1565:14)
(anonymous) @ ?t=1652434722411:1565

Sorry my jquery is bad ??

Hello again,

I just wanted to update you, I contacted the developer of my theme and now have removed the random URL string by adding the following line to your code:

cacheBust: false,

So this is great, still unable to get the box to vanish when clicking a result. But the odd thing is Ivory search plugin works fine when using your code. The box will vanish when clicking a result.

Just wondered if you had any other ideas to get to fix the box vanish?

Thanks a lot for the help you provided.

Make sure to use the last iteration of the code I sent, where this line is present:

selectors: ["body"]

That should very likely do the trick. Last time I checked, you had still the previous code active.

Best,
Ernest M.

I did try that, but it made the ajax page loads no longer work. I tried all the selectors I could find but haven’t had any luck yet.

You can see this set as body at the moment on my website I have just changed it as been messing with the search all day to see what I can achieve ??

Sorry for being persistent I really would like to use your search plugin, it is the best one.

One other thing – I don’t suppose you know how I can remove the error from the chrome dev console: Uncaught ReferenceError: Pjax is not defined at MutationObserver.<anonymous>

I did try to define Pjax as a function which reduced the error to lots of the above, to now just one error:
Uncaught SyntaxError: Unexpected identifier

I am willing to pay for your time if you would be interested to fix the issue?

Edit: I found the selectors that the theme uses in the file that runs the pjax code and have added these [“title”, “#header nav”, “#content”, “#aside”, “#footer”]

I can also remove ajax from certain selectors if this would help with the issue within the same file.
Which means my menu selectors are now working, not sure if this helps with the issue at all?

Thank a lot.

• This reply was modified 2 years, 9 months ago by chickendipper.
• This reply was modified 2 years, 9 months ago by chickendipper. Reason: Tidy up code
• This reply was modified 2 years, 9 months ago by chickendipper.

Update: I have managed to remove the errors I was seeing in the console by moving the js code you provided to load after the search plugin.

Now I just need to make the search box close after clicking on a result and it will work perfectly ??