Detect Google Website Translator change of language

Question

I'm using the Google Website Translator on my website to let the user translate the site on the fly. Using this code:

    function googleTranslateElementInit() {
        new google.translate.TranslateElement({pageLanguage: 'en', includedLanguages: 'ar,de,el,en,es,fr,it,ja,ko,nl,ru,zh-CN', layout: google.translate.TranslateElement.FloatPosition.BOTTOM_RIGHT}, 'google_translate_element');
    }

This works great, only thing now is that I need to know which language the user has actually selected. I want to detect both when the user manually selects a language and also when the translator makes an automated translation, as its enabled to do automatic translations based on the browser settings.

What I want to do is to add an event listener to when the language is changed. I.e. not only when the user manually sets the language but every time the translator actually does a translation. E.g. when the translation starts or finishes or when the page "refreshes" to show the new language.

I need to collect this information and send it to the server to know what language to use for e-mails that are sent to the user at a later stage. As this information is gathered from multiple places, I don't want to manually check the selected language every time I required the information, but to add an event listener that detects the language changing and triggers an AJAX method to save the information in session on the server.

Thanks!

score 3 · Accepted Answer · edited Mar 16 '15 at 14:19

3

When the user manually selects a language (changes the value of the selectbox) you might get the language chosen with

$('.goog-te-combo').on('change',function(){
       language = $("select.goog-te-combo option:selected").text();
        alert(language);
    });

Fiddle

In case when your page refreshes and the translator translates your page, you could get the current language that is being used by using a setTimeout. This isn't perfect, but it certainly helps mate.. :)

edited Mar 16 '15 at 14:19

Mario

1,230
7
14

answered Jan 14 '15 at 03:46

Nibin

3,922
2
20
38

4

Thanks for the answer. I managed to achieve this as well using `$('body').on('change', '#google_translate_element select', updateLanguage);` and inside the updateLanguage method retrieve the value by `$('#google_translate_element select').val()`. This works fine, however I want to find a way to listen to the event that is raised when the translator updates the page with the new language content. – Martin Jan 14 '15 at 04:29
4

$('body').on('change', '#google_translate_element select', updateLanguage); mentioned by @Blizwire worked well. and when page is refreshed to get the current language, I choose to read the cookie "googtrans" which was stored by the google translate plugin.. – chris Jun 25 '16 at 13:07

score 2 · Answer 2 · answered Jan 14 '15 at 04:03

You can use setInterval to periodically check to see if the language changed:

var translatedText='';
var interval=setInterval(function(){
   var el=document.getElementsByClassName('goog-te-menu-value')[0];  
   if(el && el.innerText!==translatedText){
        translatedText=el.innerText;
        console.log('changed');
    }
},200);

Working JS Bin: http://jsbin.com/neteqihage/1/

Detect Google Website Translator change of language

2 Answers2

Linked