开发者

Change Google Translate dropdown programmatically

开发者 https://www.devze.com 2023-02-22 06:54 出处:网络
On a site I tried adding the Google Translate dropdown using the following code: function googleTranslateElementInit() {

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();
0

精彩评论

暂无评论...
验证码 换一张
取 消