Ajax functunality doesn't work when search bar appears inside a popup

[Aramis197793]

Please go to this link:
https://www.francophilesanonymes.com/registration/

Scroll down and you’ll see a green “Test” button

Click on the button and a pop up will appear.

Inside the popup, you’ll see a search bar. If you try to search for something you’ll see that the AJAX functionality doesn’t work (i.e. it doesn’t try to “guess” what you’re looking for).

Can you please review and advise? Also please provide me your support email so I could provide you with access to my site.

Thanks in advance,
Zvi

[Ernest Marcinko]

Hi,

I see an error message in the console, giving an issue with an undefined jQuery script.

Can you please try changing the compatibility options to this. It should very likely resolve the problem.

[Aramis197793]

It works. Thanks 🙂

[Aramis197793]

Sorry, I was happy to early. 🙂

Please go to my site (https://www.francophilesanonymes.com/) in mobile. You’ll see a red looking glass. Click on it and try looking for something. The ajax doesn’t seem to work. However, if you go to the desktop version and try using the search bar in the header the ajax will work.

Zvi

[Ernest Marcinko]

Looks like there is some sort of an element cloning going on there. It is a very bad practice, and causes nothing but issues. It is a shame to see it is caused by Elementor.

You can try this custom code to get by it:

add_action('wp_footer', 'wp_footer_asp_try_fix_init', 9999);
function wp_footer_asp_try_fix_init() {
	?>
	<script>
	(function($){
		$('[class*=-search]').on('click', function(){
			setTimeout(function(){
				$('.hasAsp').removeClass('hasAsp');
				$('.hasASP').removeClass('hasASP');
				ASP.fixClones();
				ASP.initialize();
			}, 500);
		});
	})(jQuery);
	</script>
	<?php
}

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.

However please keep in mind, that this may not work in all cases, or at all, as the cause of this issue not generated by a bug in our code. Simply the element clone mechanism in javascript is a very nasty solution, and will cause issues with javascript handlers.

[Aramis197793]

Hi Ernest,

Sadly adding the code didn’t work. Is there anything which can be done by Elemntor to resolve this (sorry but I’m not very technical so I have no idea what’s element clone mechanism is and how it works).

Thanks in adavnce,
Zvi

[Aramis197793]

BTW, I noticed that this issue doesn’t happen in desktop. I brought back the test button in this page and you can see for yourself: https://www.francophilesanonymes.com/registration/

[Ernest Marcinko]

I don’t see the code on the page at the moment, are you sure you added it correctly? When I tested the code via the console, it was working for me almost all the time.

From the elementor perspective, there is unfortuantely nothing to do about it. It is very situational. In many cases it does work, in other cases it does not. We added code to the plugin to try to resolve these clone related conflicts as much as possible, but unfortunately it is very hard to get around them, if even possible.

I will to some more tests on our local servers to maybe add some improvements if possible for the next release, but I don’t know how much room for improvement is in there.

[Aramis197793]

In the attached screenshot you can see that I’ve added the code to functions.php of my theme. If I made any mistake (perhaps I should use a code snippets plugin), please let me know.

[Ernest Marcinko]

That seems okay, but the code is not present on the site front-end unfortunately, I can’t see it in the source.

Make sure to clear all layers of cache – page, minify, CDN and everything.

[Aramis197793]

Hi.

I have cleaned all cache. Can you check again?

Zvi

[Ernest Marcinko]

The code is still not present in the page source, I double checked. It is not in effect.

[Author]

Posts