Change Google Translate dropdown programmatically
On a site I tried adding the Google Translate dropdown using the following code:
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'en'
}, 'google_translate_element');
}
<script src="http://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
When you select from the dropdown that the google script inserts, a Google Translate bar appears at the top of the pag开发者_StackOverflow社区e, and all text is translated in to the selected language.
However if I try and trigger the dropdown change using JavaScript, it doesn't work:
$('.goog-te-combo').val('fr')
'French' is selected from the dropdown, however Google Translate is not triggered.
Why o why does it not work? I've also tried:
$('.goog-te-combo').trigger('click')
$('.goog-te-combo').change()
UPDATE: FYI this is not my site. I was using the Chrome console to load jQuery and execute the jQuery methods.
You can have your dropdown trigger a page reload. You can either reload the page with #googtrans(en|ja) or #googtrans/en/ja appended to the URL, or set the googtrans cookie value to /en/ja (where ja is an example of the selected target language) before reloading.
I know this is already an old topic, but I just wanna share the solution I came up with the issue on firing the google translate select element change event.
Add function that will use the dispatchEvent or fireEvent function:
function triggerHtmlEvent(element, eventName) {
var event;
if(document.createEvent) {
event = document.createEvent('HTMLEvents');
event.initEvent(eventName, true, true);
element.dispatchEvent(event);
} else {
event = document.createEventObject();
event.eventType = eventName;
element.fireEvent('on' + event.eventType, event);
} }
after setting the value, get the DOM object for select (using document.getElement...) and call the function above:
triggerHtmlEvent(selectObject, 'change');
//to get currently selected language
string language=Request.Cookies["googtrans"].Value
//to set desired language
Response.Cookies["googtrans"].Value = Your language;
//eg: Response.Cookies["googtrans"].Value = "/en/hi";
Add this to your code:
//to get currently selected language
string language=Request.Cookies["googtrans"].Value
//to set desired language
Response.Cookies["googtrans"].Value = Your language;
//eg: Response.Cookies["googtrans"].Value = "/en/hi";
In looking at your page it appears that jQuery isn't loaded, so you won't be able to use the $() function.
You need to add a reference to jQuery in your <head></head> section, such as:
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
Then
$('.goog-te-combo').val('fr');
should work.
Having spent quite a lot of time trying to get this to work too, I implemented the jquery translation plugin and was able to achieve everything I wanted to do quite easily including automatic translate to browser language on page load and clickable language links, flags etc.
Details of the plugin and downloads are here http://code.google.com/p/jquery-translate/
The correct way to use I wrote here. The google translate set the change function using the select 'select.goog-te-combo', if u use only the class, the JS don't call the correct listener. @joeyend way work, because the function identify the real 'selector'.
var trans = jQuery('select.goog-te-combo');
trans.val('fr')
trans.change();
加载中,请稍侯......
精彩评论