title: How to get the Google Custom Search (V2) to execute immediately with a pre-loaded search string?
body: <p>I've been tasked with adding GCS to a website. After I followed the instructions to create my free GCS (<a href="http://www.google.com/cse/sitesearch/create" rel="nofollow noreferrer">http://www.google.com/cse/sitesearch/create</a>), and pasted the supplied snippet into the appropriate place, the search box &amp; 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. </p>
  
  <p>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. </p>
  
  <p>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 (<a href="https://developers.google.com/custom-search/docs/element" rel="nofollow noreferrer">https://developers.google.com/custom-search/docs/element</a>) and intended to implement the 'execute immediate': </p>
  
  <pre><code>&lt;div class="content-container"&gt;  
      &lt;script type="text/javascript"&gt; 
          (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); 
          })(); 
      &lt;/script&gt; 
      &lt;gcse:search&gt; gname="2DSearch"&lt;/gcse:search&gt; 
      &lt;script type="text/javascript"&gt; 
          var element = google.search.cse.element.getElement("2DSearch"); 
          element.prefillQuery(primarySearch); 
          element.execute(primarySearch); 
      &lt;/script&gt; 
  &lt;/div&gt; 
  </code></pre>
  
  <p>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. </p>
  
  <p>There appear to be some similarities here with this question (unanswered): <a href="https://stackoverflow.com/questions/15871911/passing-optional-search-parameters-into-google-custom-search-query">https://stackoverflow.com/questions/15871911/passing-optional-search-parameters-into-google-custom-search-query</a></p>
  
  <p>I have searched the Web in vain for a number of hours for anything else relevant.</p>
  
  <p>Can anybody tell me why it's not working and/or what I need to do? </p>
  
  <p>My apologies, I have done alot of programmming but am virtually illiterate when it comes to HTML &amp; javascript. 
  Thanks
  Jim</p>
  
  <p>I discovered that the Chrome console is showing the following error:
  Uncaught ReferenceError: google is not defined</p>
  
  <p>My code now looks like this:</p>
  
  <pre><code>&lt;div class="content-container"&gt;
      &lt;script type="text/javascript"&gt;
          (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);
          })();
      &lt;/script&gt;
  &lt;/div&gt;
  
  &lt;div class="gcse-search" data-gname="2DSearch"&gt;&lt;/div&gt;
  
  &lt;div class="content-container"&gt;
      &lt;script type="text/javascript" src="https://www.google.com/jsapi"&gt;&lt;/script&gt;
      &lt;script type="text/javascript"&gt;
          var element = google.search.cse.element.getElement("2DSearch");
          element.prefillQuery(primarySearch);
          element.execute(primarySearch);
      &lt;/script&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>In the console again I'm now also seeing the following:</p>
  
  <p>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.</p>
  
  <p>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.</p>
  
  <p>Talk about trying to find your way through a coalmine with a candle... :)
  Cheers</p>