Press spacebar when button is clicked

Question

It is known that spacebar must be pressed to translate while using google transliteration.

But requirement is to translate already stored value in input fetched from database, not a live user typed value.

I doubt we can translate input value automatically with google jspi.

It is not possible to translate without hitting spacebar so I am trying to press spacebar to each class when a specific button is clicked, so it would be translated.

For example, here is button, if this button is clicked then press spacebar to each class and translate automatically.

I tried with appending space after the value, but without spacebar event nothing change

$('#translate').click(function(){
    $('.npl').each(function(){
        $(this).val($(this).val()+'');
    })
})
$('.npl').nepalize();

$.fn.nepalize = function(){
  var that = this[0];
  google.load("elements", "1", {
    packages: "transliteration"
  });
  function onLoad() {
    var options = {
      sourceLanguage: 'en', // or google.elements.transliteration.LanguageCode.ENGLISH,
      destinationLanguage: ['ne'], // or [google.elements.transliteration.LanguageCode.HINDI],
      shortcutKey: 'ctrl+g',
      transliterationEnabled: true
    };
    var control = new google.elements.transliteration.TransliterationControl(options);
    // Enable transliteration in the textfields with the given Class.
    var elements = document.getElementsByClassName('npl');
    control.makeTransliteratable(elements);  
  }
  google.setOnLoadCallback(onLoad);
}

$('#translate').click(function(){
  $('.npl').each(function(){
    $(this).val($(this).val()+'');
  })
})
$('.npl').nepalize();

<html>
<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script type="text/javascript" src="http://www.google.com/jsapi"></script>
</head>
<body>
  <button id='translate'>Translate</button>
  <input class="npl" value='Hello'>
  <input class="npl" value='How are you' />
</body>
</html>

Hemant · Answer 1 · 2019-03-28T12:52:12.660

Though it should be comment section, but I have to explain and inserting example here. In Google transliterate official website, it is mentioned how javascript string can be translated.

I think solution is in following code

https://developers.google.com/transliterate/v1/getting_started

//Load the Language API.
google.load("language", "1");

//Call google.language.transliterate() 
google.language.transliterate(["Namaste"], "en", "hi", function(result) {
  if (!result.error) {
    var container = document.getElementById("transliteration");
    if (result.transliterations && result.transliterations.length > 0 &&
        result.transliterations[0].transliteratedWords.length > 0) {
      container.innerHTML = result.transliterations[0].transliteratedWords[0];
    }
  }
});

If javascript string can be converted, It would be the best way as we can store string from database.

I tried with this, but result is blank

    google.load("language", "1");

    function initialize() {
      google.language.transliterate(["Namaste"], "en", "ne", function(result) {
        if (!result.error) {
          var container = document.getElementById("transliteration");
          if (result.transliterations && result.transliterations.length > 0 &&
            result.transliterations[0].transliteratedWords.length > 0) {
            container.innerHTML = result.transliterations[0].transliteratedWords[0];
          }
        }
      });
    }
    google.setOnLoadCallback(initialize);

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google AJAX Language API - Basic Transliteration</title>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
  </head>
  <body>
    <div id="transliteration"></div>
  </body>
</html>

Press spacebar when button is clicked

1 Answers1