Autocomplete and link back URL causes search form to include whole page

[bjornarfjelldal]

Hi! I've looked around the forum for other posts regarding this, but cannot seem to find any so I am starting a new post.

I have my Wordpress site with Zoom embedded into a page template as well as in the header, as this picture shows;



Following this guide;

https://www.zoomsearchengine.com/zoo...wordpress.html

However, when enabling autocomplete, I get a weird response on all sites (including directly from ./zoom/search.php - it looks like it embeds the whole page inside the search form (and also includes the main site's css on this current site)

Before typing in search box (with autocomplete on):


After typing in search box:



The same behaviour also exists on the template page. I found out that when disabling the embedding script / Link back URL - autocomplete works fine on the /zoom/search.php page, but the embedded page does not function (naturally referring to your guide).

Another observation is when trying to include autocomplete in forms outside of the main page (i.e. in the header) following this "new" guide;

https://www.zoomsearchengine.com/for...-on-your-site=

Is that the (faulty) autocomplete stops working at all - no automatic word (or full page) dropdown.

So I guess what I first need to make work before trying the above guide of including autocomplete in forms i.e. in the header, is to make it work natively.

This is my setup;

wordpress installed at localhost/wordpress

zoom main folder at localhost/wordpress/zoom/

template search page at localhost/wordpress/search

Zoom Search page template;

get_header(); ?>

<div id="primary" class="content-area">

            <?php virtual("./zoom/search.php");?>

</div><!-- #primary -->

<?php get_footer(); ?>

Link back URL;

$LinkBackURL = "http://localhost/wordpress/search/";

(Header form before attempt on autocomplete there as well

            <form method="get" action="./zoom/search.php">
                <input type="text" name="zoom_query" size="20" />
                <input type="submit" value="Search" />
            </form>

Anyone with a helping hand..?

[Ray]

Apologies for the delay, seems I missed this post.

Seems this particular usage scenario was neglected by a change made in V8 build 1003, that fixed a different scenario for another user.

You can revert the change by going to line 380 in search.php:

print("var ZoomAutoComplete_URL = \"".$SelfURL.$LinkBackJoinChar."zoom_ac=1\";\n");
//print("var ZoomAutoComplete_URL = \"search.php".$LinkBackJoinChar."zoom_ac=1\";\n");

And reverting it to the previous form (swap the commented line):

//print("var ZoomAutoComplete_URL = \"".$SelfURL.$LinkBackJoinChar."zoom_ac=1\";\n");
print("var ZoomAutoComplete_URL = \"search.php".$LinkBackJoinChar."zoom_ac=1\";\n");

This should allow the Autocomplete to work when you have search.php embedded in a parent search page (Wordpress) and the Linkback URL set to the latter.

We'll address this in the next release so that the code change would not be necessary. Hopefully without having to add a new configuration setting to do so.

[bjornarfjelldal]

Thank you so much for your reply, Ray! This solves it when using /zoom/search.php directly, but the same behaviour still exists embeded on the page (as a template page described in the first post);



I have tried to replace "search.php" with something else, without luck so far. Commenting both lines does not seem to have any other effect either. Do you see what I need to do additionally?

[Ray]

I can't quite imagine how that might be the case from your description alone, if the autocomplete URL is pointing to "search.php". Can I get access to the search page (is the server accessible over the internet)?

One possibility is a caching issue. Try force reloading the pages and/or clearing your cache. It's particularly difficult to get a browser to force reload Javascript.

[bjornarfjelldal]

Thanks, but clearing the cache and/or force reloading does not work. Neither does new browsers where the site has never been logged onto. I am running this locally behind a firewall at work I can't get around, but if you need me to send you files I am able to. It does as I say work fine at wordpress/zoom/search.php, but on the page template wordpress/search with

<div id="primary" class="content-area">

            <?php virtual("./zoom/search.php");?>

</div><!-- #primary -->

It does not..

[bjornarfjelldal]

This is a much needed feature for us to go forward with in this project, I hope we can figure it out..!

[Ray]

Right click on the wordpress/search page in your browser and look for "ZoomAutoComplete_URL". I suspect it's pointed at "wordpress/search" (for it to be behaving as you say) as opposed to "wordpress/zoom/search.php" (in which case it shouldn't). But if the modification was done correctly above, this should not be the case.

I also suspect I will really need to see the server to investigate what might be wrong. If you give me the files, I won't be able to run it without the WordPress installation. But if you can produce a test case setup with minimal files and zip up and email that to us, I will take a look.

[bjornarfjelldal]

Hi! I made it work on the template page by explicitly type the whole address;

print("var ZoomAutoComplete_URL = \"http://mylocalipaddress/wordpress/zoom/search.php".$LinkBackJoinChar."zoom_ac=1\";\n");

What I am now struggling with, however, is to have the autocomplete work on a form I have in my header (as displayed in the first picture of this topic).

I have followed this guide (also trying to manually declare var ZoomAutoComplete_URL as was mentioned as a possibilty in the comments;

https://www.zoomsearchengine.com/for...e-on-your-site

And have the following in the header;

<head>

    <meta charset="<?php bloginfo( 'charset' ); ?>">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="profile" href="http://gmpg.org/xfn/11">

    <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">

    <?php wp_head(); ?>
   [B] <script language="javascript" type="text/javascript">
        var ZoomAutoComplete_URL = "http://mylocalip/wordpress/zoom/search.php?zoom_ac=1";
    </script>    
    <script type="text/javascript" src="http://mylocalip/wordpress/zoom/zoom_autocomplete.js"></script>
    <script language="javascript" type="text/javascript">
        if (window.addEventListener) window.addEventListener('load', function() { ZoomAutoComplete_OnLoad('zoom_searchbox');}, false); else if (window.attachEvent) window.attachEvent('onload', function() { ZoomAutoComplete_OnLoad('zoom_searchbox');}); else window['onload'] = function() { ZoomAutoComplete_OnLoad('zoom_searchbox');}
</script>
    <link rel="stylesheet" type="text/css" href="http://mylocalip/wordpress/zoom/zoom_autocomplete.css" />
</head>[/B]

            <div class="site-header-wrapper">

                <?php

                /**
                 * Fires inside the `<header>` element.
                 *
                 * @hooked primer_add_site_title - 5
                 * @hooked primer_add_hero - 7
                 *
                 * @since 1.0.0
                 */
                do_action( 'primer_header' );

                ?>
           [B] <form method="get" action="./search/">
                <input name="zoom_query" id="zoom_searchbox" type="text" class="zoom_searchbox" size="45" />
                <input type="submit" value="Search" />
            </form>[/B]
            </div><!-- .site-header-wrapper -->

But I cannot make it work. Normal search works fine, but no automatic suggestions come up at all in this header form. Any suggestions?

[Ray]

Pull up the browser's console (under "More tools"->"Developer tools"->"Console" in Chrome) and reload the page to see what might be going on with the JavaScript.

[bjornarfjelldal]

I am not sure it is logging anything regarding this script? This is on the main page (where autocomplete does not work in header);

JQMIGRATE: Migrate is installed, version 1.4.1
[Violation] Forced reflow while executing JavaScript took 30ms
(index):1 [DOM] Password field is not contained in a form: (More info: https://goo.gl/9p2vKq) <input type=​"password" name=​"password_check" class=​"password" value data-dpmaxz-eid=​"3">​
(index):1 [DOM] Password field is not contained in a form: (More info: https://goo.gl/9p2vKq) <input type=​"password" name=​"password_check" class=​"password" value data-dpmaxz-eid=​"4">​
onloadwff.js:71 [Violation] 'setTimeout' handler took 58ms
VM2884:1 GET http://10.218.92.133/wordpress/wp-admin/admin-ajax.php?action=helpie_faq_submission_get_logged_email 400 (Bad Request)
(anonymous) @ VM2884:1
send @ jquery.js?ver=1.12.4-wp:4
ajax @ jquery.js?ver=1.12.4-wp:4
n.<computed> @ jquery.js?ver=1.12.4-wp:4
getLoggedEmail @ main.bundle.js?ver=0.7.5:1
eventHandler @ main.bundle.js?ver=0.7.5:1
init @ main.bundle.js?ver=0.7.5:1
init @ main.bundle.js?ver=0.7.5:1
(anonymous) @ main.bundle.js?ver=0.7.5:1
i @ jquery.js?ver=1.12.4-wp:2
fireWith @ jquery.js?ver=1.12.4-wp:2
ready @ jquery.js?ver=1.12.4-wp:2
J @ jquery.js?ver=1.12.4-wp:2

And this is on the search page itself (where autocomplete works in the embed/virtual, but not in header there either;

JQMIGRATE: Migrate is installed, version 1.4.1
VM2979:1 GET http://10.218.92.133/wordpress/wp-admin/admin-ajax.php?action=helpie_faq_submission_get_logged_email 400 (Bad Request)
(anonymous) @ VM2979:1
send @ jquery.js?ver=1.12.4-wp:4
ajax @ jquery.js?ver=1.12.4-wp:4
n.<computed> @ jquery.js?ver=1.12.4-wp:4
getLoggedEmail @ main.bundle.js?ver=0.7.5:1
eventHandler @ main.bundle.js?ver=0.7.5:1
init @ main.bundle.js?ver=0.7.5:1
init @ main.bundle.js?ver=0.7.5:1
(anonymous) @ main.bundle.js?ver=0.7.5:1
i @ jquery.js?ver=1.12.4-wp:2
fireWith @ jquery.js?ver=1.12.4-wp:2
ready @ jquery.js?ver=1.12.4-wp:2
J @ jquery.js?ver=1.12.4-wp:2

[Ray]

You'll need some JS debugging experience to go further (since I can't inspect the pages from here).

The lack of errors relating to the autocomplete in the console output indicates the autocomplete script is likely not executing at all. Perhaps the eventListener is not registering -- which should itself give an error. If there's no error for this, then it's either aborting before this (you can test with some JS debugging statements like alert("test"), or the eventlistener is being overloaded with some other event listener by the other JS code on your page.

In any case, as mentioned above, it would require some debugging to integrate any JS (the autocomplete script) with a page that also contains JS.

[Ray]

Just some additional information as it occurred to me when I revisited the scenario (and for sanity's sake if we need to review this in the future):

Hi! I made it work on the template page by explicitly type the whole address;

print("var ZoomAutoComplete_URL = \"http://mylocalipaddress/wordpress/zoom/search.php".$LinkBackJoinChar."zoom_ac=1\";\n");

The fact that this works and the original proposed ZoomAutoComplete_URL="search.php" doesn't work suggests it is a path issue.

I had failed to consider the fact that your scenario involved having the template page ("/wordpress/search") in a different folder to the Zoom script ("/wordpress/zoom/search.php"). Also, the fact that they both have the same name (very likely there is some URL rewrite setup on your server to allow "/wordpress/search.php" to rewrite to "/wordpress/search" or vice versa) is why the same problem persists.

Note that the FAQ on this method only documents the scenario where the template "wrapping" script (the PHP file with the virtual() call to Zoom's "search.php") is expected to be in the same folder (and with a different file name).

[bjornarfjelldal]

I think you might be right on that one, Ray - we will go live with the site (externally) soon - or to be more specific, I will rebuild it from scratch - I will try to have different paths in order to make this work. I do also believe that the JS isn't loading at all, and it might be because of some path issues. You'll hear back from me soon if I can't work it out on the new setup either Thanks for your help thus far.

[bjornarfjelldal]

Just a quick follow up, Ray, how would you suggest I set it up?

What should be the permalink for the search page? What should be the location for the zoom files? I am free to design it as I like now on a new setup.

[Ray]

Off the top of my head, I would try and put the index and Zoom search files in the same folder (say, "/wordpress/search/") as your eventual wrapping page.

The wrapping page can be "/wordpress/search/index.php" for example, and it can make the virtual() call to "/wordpress/search/search.php" in the same folder.