Change Google Translate dropdown programmatically

11
votes

On a site I tried adding the Google Translate dropdown using the following code: 

function googleTranslateElementInit() {
  new google.translate.TranslateElement({
    pageLanguage: 'en'
  }, 'google_translate_element');
}

<script src="http://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

When you select from the dropdown that the google script inserts, a Google Translate bar appears at the top of the page, and all text is translated in to the selected language.

However if I try and trigger the dropdown change using JavaScript, it doesn't work:

$('.goog-te-combo').val('fr')

'French' is selected from the dropdown, however Google Translate is not triggered.

Why o why does it not work? I've also tried:

$('.goog-te-combo').trigger('click')
$('.goog-te-combo').change()

UPDATE: FYI this is not my site. I was using the Chrome console to load jQuery and execute the jQuery methods.

7
javascriptjquery
After inspecting the DOM tree, the dropdown added by the Google script does not appear to be in an iframe. – Jamie Carruthers
If you add <div id="google_translate_element"></div> prior to loading the script so Google can populate it with additional UI, you get a select that isn't part of an iframe. Unfortunately, even calling the event triggers on these elements doesn't trigger the translation either (but the selected item does change). – patridge
Got the same problem : did you resolve it? – markzzz
It solved by joeyend. See his comment – Ivan Korytin

7 Answers

14
votes

You can have your dropdown trigger a page reload. You can either reload the page with #googtrans(en|ja) or #googtrans/en/ja appended to the URL, or set the googtrans cookie value to /en/ja (where ja is an example of the selected target language) before reloading.

6
votes

I know this is already an old topic, but I just wanna share the solution I came up with the issue on firing the google translate select element change event.

Add function that will use the dispatchEvent or fireEvent function:

function triggerHtmlEvent(element, eventName) {
var event;
if(document.createEvent) {
    event = document.createEvent('HTMLEvents');
    event.initEvent(eventName, true, true);
    element.dispatchEvent(event);
} else {
    event = document.createEventObject();
    event.eventType = eventName;
    element.fireEvent('on' + event.eventType, event);
} }

after setting the value, get the DOM object for select (using document.getElement...) and call the function above:

triggerHtmlEvent(selectObject, 'change');
4
votes

//to get currently selected language

string language=Request.Cookies["googtrans"].Value

//to set desired language

 Response.Cookies["googtrans"].Value = Your language;

//eg: Response.Cookies["googtrans"].Value = "/en/hi";

3
votes

Add this to your code:

//to get currently selected language
string language=Request.Cookies["googtrans"].Value
//to set desired language
 Response.Cookies["googtrans"].Value = Your language;
//eg: Response.Cookies["googtrans"].Value = "/en/hi";
2
votes

In looking at your page it appears that jQuery isn't loaded, so you won't be able to use the $() function.

You need to add a reference to jQuery in your <head></head> section, such as:

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

Then 

$('.goog-te-combo').val('fr');

should work.

1
votes

Having spent quite a lot of time trying to get this to work too, I implemented the jquery translation plugin and was able to achieve everything I wanted to do quite easily including automatic translate to browser language on page load and clickable language links, flags etc.

Details of the plugin and downloads are here http://code.google.com/p/jquery-translate/

0
votes

The correct way to use I wrote here. The google translate set the change function using the select 'select.goog-te-combo', if u use only the class, the JS don't call the correct listener. @joeyend way work, because the function identify the real 'selector'.

var trans = jQuery('select.goog-te-combo');
trans.val('fr')
trans.change();