Member Avatar for manchurianCEO

I tried to put a google search bar in a website. First time I pasted the whole code within the <div id="search_bar"> </div> and it was all smooth. However I want to control it from a php file.

I tried to include it through .php (files are already .php )
<?php include("PHP/google_search_bar.php"); ?>

but now the search bar will not show. It only shows the word "Loading" where the search bar used to appear. I can't click on it nor shows any input field. Just the word Loading.

Help!

*Every file is already php by the way.

  • 2 Contributors
  • 2 Replies
  • 180 Views
  • 21 Hours Discussion Span
  • Latest Post Latest Post by manchurianCEO

Dani AI

Generated

— the single word "Loading" is the Google search control's placeholder. It means the Google JS never finished (or never ran) to replace that placeholder with the real box. Moving the HTML into a PHP file doesn't break things by itself; the usual causes are ordering, a missing loader script, mixed-content blocking, or a JavaScript error that stops initialization.

Quick checklist to diagnose and fix:

  • View the rendered HTML (View Source) to confirm the include actually emits the search DIV and the Google loader script into the final page.
  • Open the browser console (F12) and Network tab on reload. Look for failed requests (404/blocked) for cse.js, jsapi, or other Google resources and for JS errors that stop execution.
  • Make sure the Google loader script is present exactly once and is loaded over the correct protocol (use the HTTPS URL on pages served via HTTPS to avoid mixed-content blocks).
  • If the search markup is inserted dynamically (AJAX/innerHTML), re-run the initialization or inject the loader script after insertion — the CSE script must see the placeholder during/after load.

If you want the simplest, self-contained searchbar.php that will work when included server-side, include both the placeholder DIV and the Google loader (replace YOUR_CX_ID with your CSE ID):

<div class="gcse-searchbox-only"></div>
<script async src="https://cse.google.com/cse.js?cx=YOUR_CX_ID"></script>

If you prefer the loader once per site, put only the DIV in searchbar.php and put the script tag in your header/footer so it loads once. Also check common gotchas: ad blockers can block Google scripts and third-party JS errors can stop execution. 's link may help for a PHP-driven results workflow, but for preserving the original search box make sure the loader and placeholder appear together in the final HTML and check the console for errors.

Recommended Answers

All 2 Replies

Member Avatar for IIM

Check.....It might help you...

Member Avatar for manchurianCEO

thank you, I just want to stick to my original search box. The code provided there has yet a few bugs and apparently each person has solved it their own way. I don't have the energy to tackle it.

I have both query and search bar php files ready. Only need to know what to add to my searchbar.php file so it's fully included in my webpages.

But thank you for your help, I still learned some stuff at that link.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.