I've been tasked with adding GCS to a website. After I followed the instructions to create my free GCS (http://www.google.com/cse/sitesearch/create), and pasted the supplied snippet into the appropriate place, the search box & button components render OK and the user is able to enter a search string, run the search and see the results. So far so good.
However, when the components render for the first time I want to be able to pass a pre-entered string into the box and programmatically have the search executed immediately. This bit is not working.
The code I currently have in place is as follows, consisting of the supplied snippet plus some extra code derived from my reading of the Custom Search Element Control API doc (https://developers.google.com/custom-search/docs/element) and intended to implement the 'execute immediate':
<div class="content-container"> <script type="text/javascript"> (function() { var cx = '(my search id)'; var gcse = document.createElement('script'); gcse.type = 'text/javascript'; gcse.async = true; gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//www.google.com/cse/cse.js?cx=' + cx; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(gcse, s); })(); </script> <gcse:search> gname="2DSearch"</gcse:search> <script type="text/javascript"> var element = google.search.cse.element.getElement("2DSearch"); element.prefillQuery(primarySearch); element.execute(primarySearch); </script> </div> primarySearch is the string I want to automatically search on. When the components render, the string 'gname="2DSearch"' appears briefly then disappears again just before the search components appear, then nothing else happens.
There appear to be some similarities here with this question (unanswered): https://stackoverflow.com/questions/15871911/passing-optional-search-parameters-into-google-custom-search-query
I have searched the Web in vain for a number of hours for anything else relevant.
Can anybody tell me why it's not working and/or what I need to do?
My apologies, I have done alot of programmming but am virtually illiterate when it comes to HTML & javascript. Thanks Jim
I discovered that the Chrome console is showing the following error: Uncaught ReferenceError: google is not defined
My code now looks like this:
<div class="content-container"> <script type="text/javascript"> (function() { var cx = '013736134253840884188:fxsx6zqql_y'; var gcse = document.createElement('script'); gcse.type = 'text/javascript'; gcse.async = true; gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//www.google.com/cse/cse.js?cx=' + cx; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(gcse, s); })(); </script> </div> <div class="gcse-search" data-gname="2DSearch"></div> <div class="content-container"> <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript"> var element = google.search.cse.element.getElement("2DSearch"); element.prefillQuery(primarySearch); element.execute(primarySearch); </script> </div> In the console again I'm now also seeing the following:
XMLHttpRequest cannot load (insert here the jsapi link above that I'm not allowed to post). Origin (insert here the URL for my localhost) is not allowed by Access-Control-Allow-Origin.
There are numerous references to similar errors to this all over the Net, each one slightly different, with solutions proposed referring to JSON, JQUERY, AJAX etc.etc., but nothing that I have found seems directly relevant to what I am trying to do (ie make available to my code the file or library in which 'google' is defined), and nothing that I have tried has worked.
Talk about trying to find your way through a coalmine with a candle... :) Cheers