Google Translate: Callback when a language is selected

Question

I have added the Google Translate plugin to my web page. How can I get a callback to my JavaScript function whenever the user selects a language from the drop down menu that the plugin adds to my web page? The Google Translate API documentation does not seem to have any information on this. I have read through the JavaScript code of the Google Translate plugin and I cannot see anything that is helpful. It will also be fine if I get a callback to my function just before the translation of my web page begins or just after the translation of my web page ends or just before or after the translation of any specific element in my web page. Here is the HTML for a simplified version of my web page: <!-- Google Website Translator plugin -->

function googleTranslateElementInit() { new google.translate.TranslateElement({pageLanguage: 'en', includedLanguages: 'es', layout: google.translate.TranslateElement.InlineLayout.SIMPLE}, 'google_translate_element'); }

This part can be translated using the Google Translator plugin.

function translationCallback() { // This function needs to be called when Google translates this web page. alert("A language was selected from the Google Translator plugin dropdown"); } JavaScript questions and answers, JavaScript questions pdf, JavaScript question bank, JavaScript questions and answers pdf, mcq on JavaScript pdf, JavaScript questions and solutions, JavaScript mcq Test , Interview JavaScript questions, JavaScript Questions for Interview, JavaScript MCQ (Multiple Choice Questions)

Answer 1

Thanks for the responses. Based on the answers and comments in the SO questions referenced in the above responses, I cobbled together the code below which works for me. I added a hidden div and a listener for its DOMSubtreeModified event. The listener gets called when Google translates the contents of the hidden div. However the listener gets called multiple times for each time a language is selected from the plugin drop down menu. Google seems to be making multiple passes. The original value of the innerHTML seems to be retained as a substring in all the passes except the last. So I check for the original innerHTML substring in the event handler to avoid executing the code multiple times. Select an initial value for the innerHTML that is distinct for each language in the drop down menu. 'English' works in my case. <!-- Google Website Translator plugin -->

function googleTranslateElementInit() { new google.translate.TranslateElement({pageLanguage: 'en', includedLanguages: 'es', layout: google.translate.TranslateElement.InlineLayout.SIMPLE}, 'google_translate_element'); }

This part can be translated using the Google Translator plugin.

English

var origValue = document.getElementById("translationDetector").innerHTML; document.getElementById("translationDetector").addEventListener("DOMSubtreeModified", translationCallback, false); function translationCallback() { // This function needs to be called when Google translates this web page. var currentValue = document.getElementById("translationDetector").innerHTML; if (currentValue && currentValue.indexOf(origValue) < 0) { origValue = currentValue; alert("There is a disturbance in the force: " + currentValue); } }