Using Google Translate for multilingual textarea

Question

I am able to successfully to do that with page refresh when i select a language from dropdown. but when i want to the same without refresh with ajax.it gives error.

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.js"></script>
<script>
    google.load("elements", "1", {
        packages: "transliteration"
    });
</script>    

<select name="langpair" style="height:32px; padding:0;" id="langpair" size="1">
    <option value="ENGLISH">ENGLISH</option>
    <option value="AMHARIC" >AMHARIC</option>
    <option value="HINDI">HINDI</option>
</select>
<br/>
<hr>
<textarea class="form-control" maxlength="160" id="message" name="message" rows="3" placeholder="Message"></textarea>
<br/>
    <script>
           $("#langpair").change(function() {
        var data = this.value;
var options = {
                    sourceLanguage: google.elements.transliteration.LanguageCode.ENGLISH,
                    destinationLanguage: [google.elements.transliteration.LanguageCode[data]],
                    shortcutKey: 'ctrl+g',
                    transliterationEnabled: true
                };

                //console.log(options);

                var control = new google.elements.transliteration.TransliterationControl(options);
                control.makeTransliteratable(['message']);
    });
    </script>

Console.log(c) gives [[object Object].HINDI].

changelanguage.php return language name like HINDI as data

Check dis Demo link.

please help. Thanks

Try changing `var c = '[' + a + '.' + b + ']';` to `var c = [ a , b ];`. But to better understand, what exactly value do you expect to be logged by `console.log(c);`? — Wesley Smith, Dec 02 '15 at 05:01
when i add this `google.elements.transliteration.LanguageCode.HINDI` in options array in destination language .it works fine.but using variable c at the same time gives `Uncaught Error: Exception in Controller: Unsupported language [object Object] in targetLangCode array`. — James, Dec 02 '15 at 05:07

Wesley Smith · Accepted Answer · 2015-12-02T09:17:10.283

2

Actually, you have asked a separate question now. Originally, your issue was regarding how to access the properties of the LanguageCode enum

Your new question is "Now that I can do that, how do I dynamically change the destination language of the transliterated control?"

Your approach of removing and re-adding the textarea will work but it is not necessary.

Transliterate offers a method for this: .setLanguagePair(sourceLanguage, destinationLanguage)

A more performant approach would be to transliterate the element on load and then change the language dynamically with the user's selection like this:

var options = {
  shortcutKey: 'ctrl+g',
  transliterationEnabled: true,
  sourceLanguage: 'en',
  destinationLanguage: ['or'],// set it to anything to start, it wont be visible anyway
};
var control = new google.elements.transliteration.TransliterationControl(options);
 control.makeTransliteratable(['message']);

$("#langpair").change(function() {
  $('#message').css('display','block');
  var data = this.value;
  $("#language_name").text(data);
  var destinationLanguage = google.elements.transliteration.LanguageCode[data];
  control.setLanguagePair('en', destinationLanguage);
});

See this updated Codepen

Answer to your original question

To access an object property using a string held in a variable, you can use the object key syntax instead of dot notation.

Change your code to:

var c = [google.elements.transliteration.LanguageCode[data]];

Note that var a and var b are no longer needed

edited Dec 02 '15 at 09:17

answered Dec 02 '15 at 05:10

Wesley Smith

19,401
22
85
133

Buddy you are a rockstar.i dont have enough repu. to upvote. – James Dec 02 '15 at 05:12
One small issue it works only for the first time selecting language but when i again select anything it does nothing. – James Dec 02 '15 at 05:16
selecting language second time mixes first language and second in textarea when new words are added and sentence becomes `ही ስጃቁን ሆው አረ यू `. First and last words are HINDI and middle part is AMHARIC. – James Dec 02 '15 at 05:38
Do you have this working online somewhere I can see it? It's hard to debug that part without being able to see it happen – Wesley Smith Dec 02 '15 at 05:46
can we move dis discussion to chat ? – James Dec 02 '15 at 06:03
Thanks a lot. Still m having trouble in events like using space key after every word and copy pasting text directly into text area.if you can help with this.Thanks – James Dec 02 '15 at 09:31
select English from dropdown.it will start converting to someother language. – James Dec 02 '15 at 09:39
Sorry, english should not be an option in the list, I meant to remove that. `Transliterate` will not accept the same language for both in and out, instead, it will throw the following exception: `Exception in setLanguagePair: Unsupported sourceLanguage & targetLanguage pair: sourceLanguage: en targetLanguage: en` and will not change the language so what you are seeing is the default language I set of `'or'`, just remove the english option from the dropdown – Wesley Smith Dec 02 '15 at 10:27
About the other part, when you say " like using space key after every word", what do you mean by that exactly? Do you want it to NOT translate the text when you hit space? – Wesley Smith Dec 02 '15 at 10:28
if i add a single word in textarea manually and proceed to next input without pressing space key.Text will not change.This is an issue.Another one is when i paste text in textarea and do the same.text remains in original language. – James Dec 02 '15 at 11:27
Keyup works in this. but not copy paste -http://www.vishalon.net/PramukhIME/JavaScriptLibrary.aspx – Bugfixer Dec 02 '15 at 11:33
Thanks @Bugfixer but thats not really the route we're on here – Wesley Smith Dec 02 '15 at 11:34
Please check accepted answer in question.i want such event http://stackoverflow.com/questions/14042193/how-to-trigger-an-event-in-input-text-after-i-stop-typing-writing – James Dec 02 '15 at 11:36
@James will each textarea only ever have one translated language in it, or can the user have several language in one then go the the next one and so on? – Wesley Smith Dec 02 '15 at 11:36
sir please don't leave your other important work for this. – James Dec 02 '15 at 11:38
first user select language from dropdown and then paste the sms template.no change event is fired in dis case.text remains same.There is only one textarea.all language will be in same textarea. – James Dec 02 '15 at 11:40
@James Hmm. thats tougher than it should be, sending keypress events manually doesnt trigger the transliteration. Ill have to come back to this when I have a bit more time – Wesley Smith Dec 02 '15 at 12:07

James · Answer 2 · 2015-12-02T09:05:33.223

I recreated textarea when dropdown is selected.it is working fine now.May be this code will help others.

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.js"></script>
<script>
    google.load("elements", "1", {
        packages: "transliteration"
    });
</script>    
<span id="language_name"></span>
<select name="langpair" style="height:32px; padding:0;" id="langpair" size="1">
    <option value="ENGLISH">ENGLISH</option>
    <option value="AMHARIC" >AMHARIC</option>
    <option value="HINDI">HINDI</option>
</select>
<br/>
<hr>
<span id="language_area"></span>
<br/>
<script>
    $("#langpair").change(function() {
        var end = this.value;
        //document.getElementById("message").value = "";
        $("#language_area").html("");
        $.ajax({
            type: 'POST',
            async: false,
            data: {data: end},
            url: "changelanguage.php",
            success: function(data)
            {
                $("#language_area").html('<textarea class="form-control" maxlength="160" id="message" name="message" rows="3" placeholder="Message"></textarea>');
                $("#language_name").html(data);
                var options = {
                    sourceLanguage: google.elements.transliteration.LanguageCode.ENGLISH,
                    destinationLanguage: [google.elements.transliteration.LanguageCode[data]],
                    shortcutKey: 'ctrl+g',
                    transliterationEnabled: true
                };

                //console.log(options);

                var control = new google.elements.transliteration.TransliterationControl(options);
                control.makeTransliteratable(['message']);
            }
        });
    });
</script>

Here id the demo.But it doesn't works without pressing space after every word as well as on pasting text.

Sorry I had to step away for a bit, please see the update to my answer above. — Wesley Smith, Dec 02 '15 at 09:17

Using Google Translate for multilingual textarea

2 Answers2

See this updated Codepen