How to dynamically change language in Google Transliterate?

Question

I have run into an problem here, almost a day gone. I have a language select box and a textarea box.

here is the HTML:

<select id="language" class="form-control">
    <option id="1">HINDI</option>
    <option id="2">KANNADA</option>
    <option id="3">BANGLA</option>
</select>
<textarea class="form-control" type="text" id="TextArea" maxlength ="500" placeholder="Enter text here..."></textarea>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>

And the Script here:

// Load the Google Transliterate API
google.load("elements", "1", {
    packages: "transliteration"
});

var language = $('#language option:selected').val().toUpperCase();

function onLoad() {
    debugger;
    var options = {
         sourceLanguage: google.elements.transliteration.LanguageCode.ENGLISH,
         destinationLanguage:[google.elements.transliteration.LanguageCode[language]],
         shortcutKey: 'ctrl+g',
         transliterationEnabled: true
    };
    var control = new google.elements.transliteration.TransliterationControl(options);
    control.makeTransliteratable(['TextArea']);
}

google.setOnLoadCallback(onLoad);

//change the language on dropdown change
$('#language').on('change', function(event){
    debugger;
    language = $(this,':selected').val().toUpperCase();
    google.setOnLoadCallback(onLoad);
});

The issue here is that it does not pop any error. The transliteration API is not working either.

For one language, when it was static, works like a charm.

Answer 1

There is a dedicated function that handles the change of language in the Google Transliterate API.

Here is the code

<select id="language" class="form-control">
    <option id="1">HINDI</option>
    <option id="2">KANNADA</option>
    <option id="3">BANGLA</option>
</select>
<textarea class="form-control" type="text" id="TextArea" maxlength ="500" placeholder="Enter text here..."></textarea>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>

JS code:

// Load the Google Transliterate API
google.load("elements", "1", {
    packages: "transliteration"
});

var language = $('#language option:selected').val().toUpperCase();
var control;

function onLoad() {
    var options = {
         sourceLanguage: google.elements.transliteration.LanguageCode.ENGLISH,
         destinationLanguage:[google.elements.transliteration.LanguageCode[language]],
         shortcutKey: 'ctrl+g',
         transliterationEnabled: true
    };
    control = new google.elements.transliteration.TransliterationControl(options);
    control.makeTransliteratable(['TextArea']);
}

google.setOnLoadCallback(onLoad);

//change the language on dropdown change
$('#language').on('change', function(event){
    language = $(this,':selected').val().toUpperCase();

    //function to change the language dynamically(Google API)
    control.setLanguagePair(
        google.elements.transliteration.LanguageCode.ENGLISH,
        google.elements.transliteration.LanguageCode[language]);
});

Hope this helps.
Thank you!