Since the google translation api is shutting down, I am trying to get the google translate web element to work across the entire session for a user, so that they do not have to change the select box option to their language on each different page.
The initial load function is given as follows:
function googleTranslateElementInit() {
new google.translate.TranslateElement({pageLanguage: 'en'}, "google_translate_element");
};
Where google_translate_element is the div into which to put the select box. When the select box is in there it always has the class “goog-te-combo”. I can change the value of the box using jQuery with no issue, eg. $(‘.goog-te-combo’).val(‘fr’) will change the box to French.
But when I try to trigger the translation using $(‘.goog-te-combo’).trigger() using all sorts event types (change, click, mouseup, mousedown, etc) the translation never fires.
Does anyone know of a way to trigger the translation?
Haven’t done this before but by looking in the inspector in Google Chrome, I’m seeing that google loads a file called main.js. Look in that file and you will probably get a clue how they trigger the switch. main.js is of course packed and minified so try using this one JS Beautifier.
I will tho look at it more and get back to you 🙂 Hope it helps!
UPDATE
The reason why you can’t trigger the element like that seems to be because the select box is inside an iframe. You can’t interact with an iframe of a different domain.