0

Here is the site I am currently working on: http://www.nbtc.org/nv/index.php

Thanks to previous help from the SO community, the buttons dynamically change the main 'content' div to whatever link the button is pointed to. They all work great except for the 'search' button at the top right.

We are using Google CSE and this is the code they gave me:

    <div id="cse" style="width: 100%;">Loading</div>
    <script src="http://www.google.com/jsapi" type="text/javascript"></script>
    <script type="text/javascript"> 
    google.load('search', '1', {language : 'en', style : google.loader.themes.V2_DEFAULT});
    google.setOnLoadCallback(function() {
    var customSearchOptions = {};  var customSearchControl = new google.search.CustomSearchControl(
    '005348393200361091503:k_xdk0rs2og', customSearchOptions);
    customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
    customSearchControl.draw('cse');
    }, true);
    </script>

As you can see by the testing site, when you click on the button the text is loaded into the div but then nothing happens, it just says 'loading'. If you press the button again the entire website goes blank.

If you right click and open the link in a new tab it works just fine.

I figure there must be a simple solution, I have looked around but haven't found an answer for this situation. I am using jquery already to perform other functions and @nicodemus13 proposed a way to rewrite the google code in jquery as an answer to this question:

How to load Google's Custom-search-engine(CSE) JS APIs after page loads?

But the details are different for the code that google gave me and I don't know how to adapt it.

Thanks! Brenden

Community
  • 1
  • 1
Brenden McDougal
  • 37
  • 1
  • 7
  • I get the script error "Uncaught ReferenceError: google is not defined." in chrome console view. How is your 'google' var being defined in the javascript? – Gaʀʀʏ May 17 '12 at 21:59
  • All the js I am using for the search engine is posted above. Looking at the above code again the google var isn't defined here, it must be defined in the jsapi file that is referenced. Maybe that file isn't being loaded properly as part of the jquery.load, so the code doesn't know what to do and that is why chrome is throwing that script error. Maybe I can get a copy of that file and host it locally on the site... – Brenden McDougal May 18 '12 at 03:02
  • Just to be clear, the code as written above works perfectly when loaded by itself in it's own window. When it is loaded using jquery.load() is when it doesn't work. – Brenden McDougal May 18 '12 at 03:08
  • Taking the second line of the above code out and putting it in the index's head doesn't change the problem. I thought perhaps getting that jsapi file to load before the search code is placed in the div with jquery.load might fix it, but no. Doing this only makes the whole webpage go blank the second you press the 'search' button. – Brenden McDougal May 18 '12 at 03:12
  • Just a thought, would it be possible to load the search engine on pageload with style="display:none;", then on clicking the "Search" button, you display the div ? – Gaʀʀʏ May 18 '12 at 13:54
  • A good suggestion, but that wont work with the way I have the site organized. – Brenden McDougal May 22 '12 at 02:04

0 Answers0