ether ether - 3 months ago 19
Javascript Question

Google WebSearch API custom search throws TypeErrors

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.com/customsearch/v1element?key=AIzaSyCVAXiUzRYsML1Pv6RwSG1gu…oogle.com&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 when error is thrown

Search page with error truncated/resolved
Search page when error is truncated or 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?

Answer

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.com/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.com/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