Call function after loading google custom search results?
google-search, google-search-api, javascript, jquery
Solution
Unfortunately v2 doesn't have this ability, but in v1 you can use:
`.setSearchCompleteCallback(object, method)`
You can search for it on this page.
Problem
I basically need to run some jQuery code after the search results get rendered on my page. I can use either the 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 the 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've tried putting my function call in various places in the code but no avail. I have a function that needs to dynamically set the height of the container the search results appear in, so once the results load I need to call it otherwise my page displays incorrectly. Here is a link to their v2 API documentation: https://developers.google.com/custom-search/docs/element#cse-element and v1: https://developers.google.com/custom-search/docs/js/cselement-reference . I can't see anything where there is a callback upon search result rendering, only on initialization. Seems crazy though there isn't support for something like this. Here is what I've 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 outputs "executed". Also I notice in my console I have the following error: Unsafe JavaScript attempt to access frame with URL about:blank from frame with 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 match. Not sure if that matters as the search function still works fine. I am testing this on localhost over http.