Trigger Google Web Translate Element

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 t开发者_运维百科he 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?

---

This is an old question but I'll answer since i had the same problem and got around it. I had to get the DOM from jQuery and fire and execute.

 function fireEvent(element,event){
     console.log("in Fire Event");
    if (document.createEventObject){
            // dispatch for IE
            console.log("in IE FireEvent");
        var evt = document.createEventObject();
        return element.fireEvent('on'+event,evt)
    }
    else{
            // dispatch for firefox + others
            console.log("In HTML5 dispatchEvent");
            var evt = document.createEvent("HTMLEvents");
            evt.initEvent(event, true, true ); // event type,bubbling,cancelable
            return !element.dispatchEvent(evt);
    }
 }

And I call it using

 var jObj = $('.goog-te-combo');
 var db = jObj.get(0);
 jObj.val(Lang);
 fireEvent(db, 'change');

---

I have been having problems with this subject all day too :). But I have came to a conclusion.

Using the Chrome inspector tool I found that the Google translate select box is created AFTER the window.load event triggers! This is a big problem if you are trying to edit it using jQuery.

So I found a workaround. I know that's probably a wrong approach, but it is working for me. In my case I wanted (job related request) to change the first option of the select box, normally "Select you Language" to something different, ex. 123.

So I have implemented the following solution:

$(window).load(function () {
   setTimeout(function () {
      if ($("select.goog-te-combo option:first").val()=='')
      {
         $("select.goog-te-combo option:first").text("123");
      }
   }, 1000);
});

Hoping i have helped someone somehow.

Regards to all.

---

The Google Translate Element language should carry between pages, though it can take a bit to kick in sometimes. In the earlier days, it wouldn't persist on Google Chrome, of all browsers, but it worked fine in Firefox and IE. As of writing this, it worked fine for me in Chrome, too.

If you want to force the translation to a particular language on the first page load, though, you can use a Google-mentioned URL hash/fragment on page load. Since adding the hash after the page loads doesn't seem to trigger it, though, you will have to have it in a link that takes the user there the first load. Here is the hash syntax for forcing an immediate translation.

http://www.somedomain.com/#googtrans(en|TARGET_LANG)

For example, to force the page to translate into French as soon as the translate system can.

http://www.somedomain.com/#googtrans(en|fr)

I can't seem to decipher the meaning of the syntax, but I am only trying it on an originally-English page. #googtrans(en|fr|ja) results in Japanese but so does #googtrans(en|ja|fr). Omitting the en| didn't seem to have any effect either. They don't go into detail on the specifics where Google posted this tidbit (under "What is the Google Translate Web Element?").

---

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.

---

set the cookie googtrans to /en/XX and reload the page:

document.cookie = 'googtrans=/en/fr';
location.reload();

(of course, check if the cookie is not set before reloading, otherwise you'll get an infinite reload loop)