Search Form Behavior in Mobile/Responsive View

[anindyaParticipant]

Hi,
I have successfully replaced the theme search feature (header area) with Ajax Search Pro, using the PHP shortcode <?php echo do_shortcode(‘[wpdreams_ajaxsearchpro id=2]‘); ?>. This works perfectly, shows the vertical search results as intended, and when I click search (or hit enter) it goes to search url e.g. http://kalifeoscope.com/?s=fashion
However, in Mobile/responsive view (screen width < 1024 px) I have 2 problems..
(1) On expanding the responsive nav the same form does NOT show the search results as I type.
(2) When I click search (or hit enter) the same form throws the search term url like http://kalifeoscope.com/?phrase=fashion#. This url is not working with the plugin.
How do I control this behavior for the responsive view? Where should I be looking to fix this?
FYI, there seem to be no compatibility erros, as reported in ‘Compatibility Settings’.

[Ernest MarcinkoKeymaster]

Hi!

I will try to explain what is going on and why is it happening, it took me a while to figure it out.

So, at first sight it indeed looks like the two search forms are the same, but they are actually not. Turns out, the mobile menu has some weird solution to actually clone the DOM Node of certain parts of the menu to itself. This is not an issue, until you want to put something (interactive elements) that has javascript functions and handlers attached to it – like ajax search pro plugin, or anything else using javascript actions.
The javascript cloning process makes an exact duplicate of an element, but it cannot duplicate the javascript actions/event handlers with it, it’s virtually impossible to do so. The plugin has a fail-safe to initialize itself if the shortcode is used more than one time, and it works, however in this case there is a huge difference – the plugin is not duplicated via shortcode, but the nodes have duplicate IDs due to the cloning, which is invalid HTML and it’s not possible to handle correctly.

I’ve only seen this once in another case about 2 years ago, and I suggested using a different menu (which doesn’t use element cloning) instead as it is impossible to properly solve this. I still highly suggest a different approach, as element cloning really narrows the possibilities of placing other than simple elements into the header.

This time I took some time to figure out something that might solve this, although I cannot guarantee it will work properly each and every time. Place this script code into the footer of your site, just before the closing body tag (footer.php file in your theme directory, or equivalent):

This is a really fishy solution, I honestly cannot guarantee it’s going to work properly, but it’s worth a try.

Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[anindyaParticipant]

Well… This seems to be working perfectly in multiple screens, in Chrome & FF… unless you can locate some error.. please have a look.

Question: Before I tried to replace the Theme Search in the header.php by using the php shortcode, I was using the WP Search widget in the sidebar (ONLY on Homepage), and used the setting “Theme search bar replace” in Ajax Search Pro… <span class=”code”>This form was working then.</span> Now, AFTER I have used the php shortcode in the header, this search form in the sidebar has stopped working (no results on type, throws the search term url like http://kalifeoscope.com/?phrase=fashion#).

Is the reason similar to the DOM element duplication? I just wish to know.. obviously I dont want two different search forms put up o my website. Just asking.
You can have a look please.

[Ernest MarcinkoKeymaster]

Hi!

I figured that one out as well. Apparently the DOM cloning does break the initialization script as well. Luckily there is a way to get around it.

I’ve made a minor modification to the previous code, hopefully this will do the trick:

Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[anindyaParticipant]

Yes.. tried it… works perfectly!
Thanks a lot for the support.

[Ernest MarcinkoKeymaster]

You cannot access this content. Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[Author]

Posts