How to enable Google Transliteration for multiple dynamic Textboxes (ASP.Net)

Question

Here's the sample (available everywhere) code for integrating Google Transliteration code in ASP.Net Pages.

But my question is, how to enable transliteration in TextBoxes which will be generated on runtime? This script demands the ID of the textbox for applying Transliteration. But my textboxes will be generated on runtime.

Need an alternative for this line of code:
control.makeTransliteratable(['transliterateTextarea']);

  //Script Starts here

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

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

    // Create an instance on TransliterationControl with the required
    // options.
    var control =
        new google.elements.transliteration.TransliterationControl(options);

    // Enable transliteration in the textbox with id
    // 'transliterateTextarea'.
    control.makeTransliteratable(['transliterateTextarea']);
  }
  google.setOnLoadCallback(onLoad);

 //End here

Answer 1

Use RegisterStartupScript. RegisterStartupScript will be be executed after page is loaded completely.

function EnableTransalation(ctrlId) {
    //Script Starts here

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

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

        // Create an instance on TransliterationControl with the required
        // options.
        var control =
        new google.elements.transliteration.TransliterationControl(options);

        // Enable transliteration in the textbox with id
        // 'transliterateTextarea'.
        control.makeTransliteratable(["'" + ctrlId + "'"]);
    }
    google.setOnLoadCallback(onLoad);

    //End here
}

In the code behind,

protected override void OnPreRender(EventArgs e)
{
  Page.ClientScript.RegisterStartupScript(GetType(), "EnableTransalation", "EnableTransalation('" + ctrl.ClientID + "')", true);
}

Answer 2

First you have to set all text box class name as hindiFont.

Use this Code:

google.load("elements", "1", {
    packages: "transliteration"
});

function onLoad() {
    var options = {
        sourceLanguage: [google.elements.transliteration.LanguageCode.ENGLISH],
        destinationLanguage: [google.elements.transliteration.LanguageCode.HINDI],
        transliterationEnabled: true,
        shortcutKey: 'ctrl+g'

    };

    var control = new google.elements.transliteration.TransliterationControl(options);

    $('.hindiFont').each(function(){
        var id = this.id;
        control.makeTransliteratable([id]);
    })
}
google.setOnLoadCallback(onLoad);