Calling a function after loading Google Custom Search Results?

Question

I basically need to run some jQuery code after the search results are displayed on my page. I can use either v1 code:

<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 orderByOptions = {}; orderByOptions['keys'] = [{label: 'Relevance', key: ''},{label: 'Date', key: 'date'}]; customSearchOptions['enableOrderBy'] = true; customSearchOptions['orderByOptions'] = orderByOptions; var customSearchControl = new google.search.CustomSearchControl( 'zzzzzzzzzzzz', customSearchOptions); customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET); var options = new google.search.DrawOptions(); options.setAutoComplete(true); customSearchControl.setAutoCompletionId('zzzzzz:zzzzzzz+qptype:3'); options.enableSearchResultsOnly(); customSearchControl.draw('cse', options); function parseParamsFromUrl() { var params = {}; var parts = window.location.search.substr(1).split('\x26'); for (var i = 0; i < parts.length; i++) { var keyValuePair = parts[i].split('='); var key = decodeURIComponent(keyValuePair[0]); params[key] = keyValuePair[1] ? decodeURIComponent(keyValuePair[1].replace(/\+/g, ' ')) : keyValuePair[1]; } return params; } var urlParams = parseParamsFromUrl(); var queryParamName = "q"; if (urlParams[queryParamName]) { customSearchControl.execute(urlParams[queryParamName]); } }, true); </script> 

Or v2 code:

 <!-- Put the following javascript before the closing </head> tag. --> <script> (function() { var cx = 'xxxxxxxxx'; 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> 

I tried to put my function call in different places in the code, but to no avail.

I have a function that should dynamically set the height of the container in which the search results are displayed, so after loading the results, I need to call it, otherwise my page will not display correctly.

Here is a link to their API v2 documentation: https://developers.google.com/custom-search/docs/element#cse-element and v1: https://developers.google.com/custom-search/docs/js / cselement-reference , I don’t see anything where there is a callback when rendering the search result, only during initialization. It seems crazy, although there is no support for something like this.

Here is what I tried with v2:

 (function () { var cx = 'xxxxxxxxx'; 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; gcse.onreadystatechange = gcse.onload = function () { console.log("executed"); SetMainHeight(20); }; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(gcse, s); })(); 

The console never displays "done." I also notice that in my console I have the following error:

Unsafe JavaScript is trying to access a frame with a URL: empty from a frame with a URL http://www.google.com/cse?q=test&client=google-coop&hl=en&r=s&cx=xxxxx ... s1% 2Csr1 & rurl = http% 3A% 2F% 2Flocalhost% 3A58257% 2FSearch% 3Fq% 3Dtest # slave-1-1. Domains, protocols, and ports must be consistent.

Not sure if this is important since the search function is still working fine. I am testing this on localhost over http.

Answer 1

Unfortunately, v2 does not have this ability, but in v1 you can use:

.setSearchCompleteCallback(object, method)

You can find it on this page .

Answer 2

The previous solutions did not work for me, but here is what worked for me:

 <script> (function() { window.__gcse = { callback: myCallback }; function myCallback() { $('input.gsc-input').keyup(function(e) { if(e.keyCode == 13 || e.which == 13) { console.log('enter pressed'); }}); $('input.gsc-search-button').on('click', function(e) { console.log('clicked');}); } var cx = '002806224466286757728:XXXXXXX'; var gcse = document.createElement('script'); gcse.type = 'text/javascript'; gcse.async = false; 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></gcse:search> 

Hope this helps

Answer 3

For example, for v2, try installing the onload handler in a gcse (script) object before embedding it in the DOM.

 gcse.onreadystatechange = gcse.onload = function() { //execute my code }; 

basically you end up with:

 <!-- Put the following javascript before the closing </head> tag. --> <script> (function() { var cx = 'xxxxxxxxx'; 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; gcse.onreadystatechange = gcse.onload = function() { //execute your code here }; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(gcse, s); })(); </script>