Jquery – Trigger Google Web Translate Element

google-translatejquery

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?

Best Answer

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');

Related Solutions

Javascript – How to detect a click outside an element

Note: Using stopPropagation is something that should be avoided as it breaks normal event flow in the DOM. See this CSS Tricks article for more information. Consider using this method instead.

Attach a click event to the document body which closes the window. Attach a separate click event to the container which stops propagation to the document body.

$(window).click(function() {
  //Hide the menus if visible
});

$('#menucontainer').click(function(event){
  event.stopPropagation();
});

Javascript – How to check if an element is hidden in jQuery

Since the question refers to a single element, this code might be more suitable:

// Checks CSS content for display:[none|block], ignores visibility:[true|false]
$(element).is(":visible");

// The same works with hidden
$(element).is(":hidden");

It is the same as twernt's suggestion, but applied to a single element; and it matches the algorithm recommended in the jQuery FAQ.

We use jQuery's is() to check the selected element with another element, selector or any jQuery object. This method traverses along the DOM elements to find a match, which satisfies the passed parameter. It will return true if there is a match, otherwise return false.

Best Answer

Related Solutions

Javascript – How to detect a click outside an element

Javascript – How to check if an element is hidden in jQuery

Related Topic