Click here to Skip to main content
14,450,027 members
Rate this:
Please Sign up or sign in to vote.
This is very strange and a bit frustrating. Here is the issue. When using Google Chrome for mobile, I head to our website, touch the search icon in the header and a highlight animation happens but the search box will not populate. After that failed attempt, a hashtag is now at the end of the URL. It does not matter what page I am on, the URL will add a hashtag at the end. The menu icon in the header will do the same thing. I then have to refresh the page in order to get the search box to work. I even deleted the hashtag, pressed enter, and the search box populated that way as well as refreshing the page. I cannot replicate the issue via Mozilla Firefox or Webroot Secure Anywhere Browsers for mobile. Another interesting thing is that the issue happened on Desktop via Google Chrome Incognito. Now, once you get the search to populate like normal (after a refresh) and search for something it will populate the results. However, when on the results page, if you click on the search icon in the header, it clears the search results, adds a hashtag to the end of the URL, and no longer works again for mobile via chrome and desktop via chrome incognito. It works fine in Firefox for desktop and mobile; it doesn't matter if I am in Incognito or not.

Unfortunately, I could not find anything related to my topic over the internet. I am a beginner and have tried to figure it out but I have no clue where to start or where to look.

Is there some type of code I can put in to fix this issue or is it something else? I understand that this may be a little more complex, so I appreciate the time you give me as well as any help I get. Hopefully, it will be an easy thing to fix.

I hope I was clear, easy to follow, and answered all of your questions. Thank you!

Thanks and regards,

Josh

What I have tried:

I want to mention that I use WordPress and set up Google CSE with the Layout set to Compact using their Default Theme and have added CSS to style the search box and results. I have run several tests and only one result prevailed. Also, one thing I want to note in doing all of my tests is I cleared my cache via browser and Supercacher for my website. The first test was to deactivate all plugins and that did not change anything. The second step was to delete the CSS I added and that did nothing. Then, I changed the theme and that worked. Our theme, BuddyBoss, has a search.php file and a searchform.php file. The theme I switched to only has a searchform.php file (not sure if that matters at all). I deleted the PHP in the searchform.php file and added the following code (using my Child Theme):

(function() {
    var cx = 'CSE ID';
    var gcse = document.createElement('script');
    gcse.type = 'text/javascript';
    gcse.async = true;
    gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
        '//cse.google.com/cse.js?cx=' + cx;
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(gcse, s);
  })();
</script>
<gcse:searchbox-only resultsUrl="https://example.com/"></gcse:searchbox-only>


The only two things I changed to the above code was the CSE ID and the resultsUrl. Not sure if I needed to change anything else, such as //cse.google.com/cse.js?cx=' + cx? Either way, it works fine. I then added the code provided by Google via Setup>Basics>Get Code to the search results page I created. Then, Implemented the CSS, which I can provide as well if anyone needs it.
Posted
Updated 12-Feb-20 10:20am
v3
Comments
OriginalGriff 9-Feb-20 3:28am
   
"Spammy" links removed.
Member 14739178 9-Feb-20 3:37am
   
Sorry, not trying to be spammy. I just thought as much information would help. I change it to example.com instead.
OriginalGriff 9-Feb-20 3:42am
   
That's OK - I guessed that, so I removed the URL instead of reporting you.
If they had stayed, there is a good chance a more trigger-happy member would start the process of banning you from the site, and I didn't think that was warranted at this stage.
Richard Deeming 11-Feb-20 11:36am
   
You need to check the console for errors - it sounds like the script which is supposed to fire when you click the icon is falling over.

For a mobile device, you'll need to do that remotely. That's probably easiest with an Android device:
Get Started with Remote Debugging Android Devices[^]
Member 14739178 12-Feb-20 15:24pm
   
Thank you for your response! It helped me figure out what was going on. I have a plugin named SG Optimizer and it was deferring render-blocking JS. Once I turned it off the issue was gone. This process lead me to figure out how to keep our theme's search box styling, which is what I wanted. Thank you for your help.

1 solution

Rate this:
Please Sign up or sign in to vote.

Solution 1

I found a fix for the issue. On a separate forum, someone said it sounds like the script which is supposed to fire when you click the icon is falling over. That indeed is what it was. A plugin called SG Optimizer added code into my .htaccess file deferring render-blocking JS so I deactivated that feature and the issue was gone.

I also figured out what to add in my child theme's searchform.php file. I altered my theme's code slightly as you can compare:

My theme's searchform.php file:
<form role="search" method="get" class="search-form" action="<?php echo esc_url( home_url( '/' ) ); ?>">
	<label>
		<span class="screen-reader-text"><?php esc_html_e( 'Search for:', 'buddyboss-theme' ); ?></span>
		<input type="search" class="search-field-top" placeholder="<?php echo esc_attr( apply_filters( 'search_placeholder', __( 'Search', 'buddyboss-theme' ) ) ); ?>" value="<?php echo get_search_query(); ?>" name="s" />
	</label>
	<input type="submit" class="search-submit" value="<?php echo esc_attr_e( 'Search', 'buddyboss-theme' ); ?>" />
</form>

My code:
<form role="search" class="search-form" action="<?php echo ( '/_search' ); ?>">
	<label>
		<span class="screen-reader-text"><?php esc_html_e( 'Search for:', 'buddyboss-theme' ); ?></span>
		<input type="search" class="search-field-top" placeholder="<?php echo esc_attr( apply_filters( 'search_placeholder', __( 'Search', 'buddyboss-theme' ) ) ); ?>" value="<?php echo get_search_query(); ?>" name="q" />
	</label>
</form>

As you can see I got rid of the method="get", removed the input type="submit" line above the /form, replaced the name="s" with name="q", and on the first line I change the echo URL. I get to keep the styling of my theme's search box while having it execute the results to Google CSE.

I am not sure if my fix is appropriate to do but it works!
   

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
Top Experts
Last 24hrsThis month



CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100