javascript - Google WebSearch API custom search throws TypeErrors - Stack Overflow

admin管理员组

文章数量:1355056

We have a custom searchbar on our website and I noticed that sometimes (9/10 times) the JS will throw this error, which forces the content that you searched for to not render

www.googleapis/customsearch/v1element?key=AIzaSyCVAXiUzRYsML1Pv6RwSG1gu…oogle&callback=google.search.Search.apiary####&nocache=1446053383742:2

Uncaught TypeError: google.search.Search.apiary#### is not a function

Search page when error is thrown:

Search page with error truncated/resolved

But if I were to refresh, or research, this error is trumped and will render all of my searches. After looking through the file, I found out the google.search.Search.apiary#### that they are referring to is only mentioned once. So I believe that this error is truncating the entire file when it does show up. What could be causing this, what would be some options for fixing it?

We have a custom searchbar on our website and I noticed that sometimes (9/10 times) the JS will throw this error, which forces the content that you searched for to not render

www.googleapis./customsearch/v1element?key=AIzaSyCVAXiUzRYsML1Pv6RwSG1gu…oogle.&callback=google.search.Search.apiary####&nocache=1446053383742:2

Uncaught TypeError: google.search.Search.apiary#### is not a function

Search page when error is thrown:

Search page with error truncated/resolved

But if I were to refresh, or research, this error is trumped and will render all of my searches. After looking through the file, I found out the google.search.Search.apiary#### that they are referring to is only mentioned once. So I believe that this error is truncating the entire file when it does show up. What could be causing this, what would be some options for fixing it?

• javascript
• google-search
• google-custom-search
• google-search-api

Share Improve this question Follow edited Oct 28, 2015 at 18:05 knocked loose asked Oct 28, 2015 at 17:37 knocked looseknocked loose 3,31422 gold badges2727 silver badges5252 bronze badges 1

• Thanks a lot for the suggested solution. As a matter of fact, we are using a simple HTML TEXT box on all our pages and then redirect the search query to a specific search only page. On this search page, we do have the Google's search box (generated by script) and the search results. I believe, the script that was run twice was causing the issue for us too. I have removed one of them and it seems to work at this time. Thanks a lot for documenting it. – Anil Gupta Commented Jul 27, 2016 at 19:10

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 10

Alright, I stumbled upon an answer:-

After doing some more research, I found that this user on Google Forums also has the same issue.

To put it simply, the way it works is you use a <script> to generate your searchbar.

You have this function + html element for your search bar

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

<gcse:searchbox-only resultsUrl="/search-results"></gcse:searchbox-only>

So we generated the bar in our <div class="header"> which is a HAML element, as a part of a template. So it was always loaded within every header. Since we have 10 pages, this same script was generated 1 time per page.

Our Google CSE is made to search and then redirect to the url /search-results where it generates the results.

To generate the results, you needed this function and HTML

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

Which is the same as the one being loaded in our Header. With this set up, the results page would call that <script> twice when loading in, and cause the JS to break. So after removing the <script> loading the results, it stopped throwing the error.

To put it brief, just make sure you aren't calling the same function twice on your results page, and it should clear up the Uncaught TypeError.

Don't. Repeat. Yourself

--ether

In my case I accidentally had the form and script for the Google Custom Search repeated twice on the same page. Once the second lot was removed it stopped giving the error.

本文标签： javascriptGoogle WebSearch API custom search throws TypeErrorsStack Overflow