CODEWITHSUNDEEP
javascriptjquerygoogle-translatetranslate
James
James

Reputation: 27

Using Google Translate for multilingual textarea

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

Upvotes: 0

Views: 4722

Answers (2)

Wesley Smith
Wesley Smith

Reputation: 19571

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

Upvotes: 2

James
James

Reputation: 27

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.

Upvotes: 1

Related Questions