Ajax language translation tool based on Google Ajax Language API

I’ve built a simple Ajax language translation tool based on the Google Ajax Language API. It’s pretty easy to build one by yourself, by going through some of the examples and documentations given on the Google API page.

Here you go the break down of how I built it.

First, you need to include the few lines, which is the Google Ajax Language API as follows:

<script type=”text/javascript” src=”http://www.google.com/jsapi”></script>

Then, within a script tag pair, I call the common loader, to load language API, google.load(“language”, “1″), and I have two functions, which are the translate() function and the showLanguageDropDown() function, which is to translate the text and to show the supported languages when a user clicks on it.

<script type=”text/javascript”>
google.load(“language”, “1″);

/**
The translate function, which does the translation using Google Ajax Language API, when the user
clicks the “Translate Now” button
*/
function translate()
{
  // get textarea that contains the text needs to be translated
  var text2bt = document.getElementById(‘text2bt’);
  // get the drop-down that shows the chosen language to be translated from
  var frl = document.getElementById(‘frl’);
  // get the drop-down that shows the chosen language to be translated to
  var tol = document.getElementById(‘tol’);
  // then call the google translate method
  google.language.translate(text2bt.value, frl.value, tol.value,function(result) {
    if (!result.error) {
      // assign the translated text to the textarea
      var container = document.getElementById(“textt”);
      container.value = result.translation;
    }
  });
}

/**
The showLanguageDropDown function that dynamically generates the OPTIONS for the specified SELECT,
when the user first clicks on the specified SELECT
*/

function showLanguageDropDown(wsel,se){
  // Get the SELECT specified by ID in parameter “wsel”
  var frl=document.getElementById(wsel);
  // If the SELECT is NOT zero-length, then do nothing and return
  if (frl.length>0) return;
  // Else continue, and obtain the supported language Enumeration
  var a=google.language.Languages;
  var r=0;
  // Loop thru the Enumeration to assign the Option objects to the specified SELECT
  for(var key in a){
    var lan= key.toUpperCase();
    var lcode=a[key];
    if (google.language.isTranslatable(lcode)) {
        if(lcode==se)
        // mark “selected” for the default selection
          frl.options[r]= new Option (lan,lcode,true,true);
        else
          frl.options[r]=new Option (lan,lcode,false,false);
    }
    r++;
  }
}
</script>

The table that presents the form for user to key the text to be translated, the two drop downs that contain the languages for users to choose for “Translated From” and “Translated To”, and a textarea to show the translated result.

<table border=0 cellspacing=1 cellpadding=1 align=center style=”font-size:8pt;border:1px dotted #AABBCC;width:98%;”>
<tr>
<td align=left width=30% valign=top>
<b>Text to be translated</b>
</td>
<td align=left width=70% valign=top>
<textarea id=”text2bt” cols=”30″ rows=”3″>Hello World</textarea>
</td>
</tr>
<tr>
<td align=center width=”100%” colspan=”2″ valign=top nowrap>
<b>From</b> <br />
<select style=”font-size:8pt;” id=”frl” onClick=”showLanguageDropDown(‘frl’,'en’);”></select>
<p> <b>To</b> <br />

<select style=”font-size:8pt;” id=”tol” onClick=”showLanguageDropDown(‘tol’,'es’);”></select>
</td>
</tr>
<tr>
<td align=left width=30% valign=top>
<b>Translated Text</b>
</td>
<td align=left width=70% valign=top>
<textarea id=”textt” cols=”30″ rows=”3″></textarea>
</td>
</tr>
<tr>
<td align=center width=100% colspan=2 valign=top>
<input type=button onClick=”translate();” value=”Translate Now”/>
</td>
</tr>
</table>

Voila, now you have an ajax translation tool built using Google Ajax Language API. Try out the Ajax Translation Tool here. Improvement: It’ll be better to initialize the drop downs first instead of getting the users to click then only presents the options. You can use the google.setOnLoadCallback(setDropDowns); to set both drop downs in one looping of the language Enum.

Enter your email address to subscribe our newsletter or feed for FREE:

Delivered by FeedBurner


Bookmark with:

[Delicious]    [Digg]    [Reddit]    [Facebook]    [StumbleUpon]

0 Responses to “Ajax language translation tool based on Google Ajax Language API”


  1. No Comments

Leave a Reply

You must login to post a comment.