Member Avatar for manchurianCEO

I posted this once but no one is stopping by so maybe the title didn't sound much interesting.

I got the code for a google search bar and pasted it on the corresponding <div id and made a separate file for the search results and worked perfectly.

But when I tried to put the search bar code in a php file and include it in my pages <?php include("php/google_search_bar.php"); ?> it does not show the search bar. It shows only the word "Loading" which is found here:

<div id="cse-search-form" style="width: 100%;">Loading</div>
<script src="../../Documents/jsapi" type="text/javascript"></script>... etc.

but the input box and search button are not loaded in the webpage.

**Note that the code itself it's correct because if I copy and paste it back directly into the <div id="searchbar.php"> the whole search bar re-appears and fully functional.

google_search_bar.php only contains the source code provided by google when the search bar was created. Do I need to add any more code so it shows up at <?php include("php/google_search_bar.php"); ?> ?

Thank you for your help!

  • 2 Contributors
  • 1 Reply
  • 274 Views
  • 21 Hours Discussion Span
  • Latest Post Latest Post by almostbob

Dani AI

Generated

Short answer: the browser-side Google script never ran to replace the placeholder, so you only see the fallback text. is correct that a bad script reference is the most common cause, but there are a few other things to check before guessing which one.

Why this happens and what to check

Recommended fix (use the current snippet)

  • Migrate to the current Programmable Search snippet and use an absolute HTTPS URL for the loader (replace YOUR_ENGINE_ID with your cx value):
<script async src="https://cse.google.com/cse.js?cx=YOUR_ENGINE_ID"></script>
<div class="gcse-searchbox-only" data-resultsUrl="https://example.com/search-results.php"></div>
  • On the results page include the results-only snippet:
<script async src="https://cse.google.com/cse.js?cx=YOUR_ENGINE_ID"></script>
<div class="gcse-searchresults-only"></div>

Google documents this layout and the exact code to copy from your engine control panel.
https://developers.google.com/custom-search/docs/tutorial/implementingsearchbox

Quick checklist if it still fails

  • Verify the loader URL loads (Network tab) and there are no 4xx/5xx responses.
  • Confirm you used HTTPS for external Google scripts (no mixed-content).
  • Confirm the cx (engine ID) is correct and that the results page contains the results-only div when using two-page mode.
  • If your included fragment used the old google.load/jsapi approach, migrate to the Programmable Search Element — older AJAX Search loader behavior has been phased out.
    https://groups.google.com/g/Google-AJAX-Search-API/c/Ao9TbQbYgHo

If those checks are green the include will behave the same as pasting the snippet directly into the page.

Member Avatar for almostbob

means the program has not found the javascript to replace the innertext of the div
likely causes

wrong filename the script is unlikely to be called jsapi, more often

the path is wrong ../../Documents is not the path to the script from the file that is including, try absolute references <script src=''> or <script src='<?php echo $_SERVER['DOCUMENT_ROOT'].'/documents/jsapi.js'; ?>' type='text/javascript'>

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.