<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<!-- Add the AJAX API script -->
<script type="text/javascript"
src="http://api.microsofttranslator.com/V1/Ajax.svc/Embed?appId=yourAppId"></script>
<title></title>
</head>
<fieldset>
<legend>Results</legend>
<table>
<tr>
<!-- Assign id to element so we can identify it to be translated -->
<td id="firstParagraph">
As mentioned in the previous 'Translating Asynchronously' demo the Microsoft
Translator AJAX API has the ability to translate specific elements of a web
site as well as the entire page. To accomplish this is simple, instead of
parsing through the entire page through document.body, you can specify a
specific element by parsing document.getElementById(id).
</td>
</tr>
<tr />
<tr>
<td id="secondParagraph">
You can see an exmaple of this through the demo below, choose the language you
would like to translate to and then click the translate button. This will parse
the paragraph above which has the elementId 'firstParagraph' to the translator
method. The result will be only that first paragraph being translated while
this second one remains in English. Click on the ASPX tab above after trying it
yourself to see exactly how this has been accomplished through JavaScript.
</td>
</tr>
</table>
</fieldset>
<div style="position: relative; margin-left: 20px;">
<!-- Add the dropdown list and assign culture codes to the associated language names -->
<asp:dropdownlist runat="server" id="dropdownlistLanguages">
<asp:listitem text="English" value="en">
</asp:listitem>
<asp:listitem text="French" value="fr">
</asp:listitem>
<asp:listitem text="German" value="de">
</asp:listitem>
</asp:dropdownlist>
<!-- Add the button and click event, parse the id of the element you want translated to
the function -->
<asp:button id="btnParagraph2" runat="server"
onclientclick="translateParagraph('firstParagraph');return false;"text="Translate" />
</div>
<script type="text/javascript">
// Creates the currentLanguage variable
var currentLanguage;
// The initialize funtion to set the currentLanguage the english on page load
function initialize() {
currentLanguage = "en";
}
// Funtion to return the language selected from the drop down list
function GetSelectedLanguage() {
// find dropdownlist element
var ddl = document.getElementById('<%= dropdownlistLanguages.ClientID %>');
var selected = null;
for (var i = 0; i < ddl.children.length; i++) {
// find 'selected' tag in item's markup
var index = ddl.children[i].outerHTML.indexOf('selected');
if (index > -1) {
// only one item in a dropdownlist can be selected
selected = ddl.children[i];
break;
}
}
// if not defined, return current language
if (!selected) return currentLanguage;
// otherwise select current language
return selected.value;
}
// Translate method that takes an element id parameter
function translateParagraph(id) {
// Get the language from the drop down list
var lang = GetSelectedLanguage();
// Check if the current language is equal to the language to translate to
if (currentLanguage != lang) {
// use a callback function to set the translated text
Microsoft.Translator.translate(document.getElementById(id),
currentLanguage, lang, function(translation)
{ document.getElementById(id).innerText = translation; });
// update currentLanguage value
currentLanguage = lang;
}
}
// Call the initialize funtion on page load
window.onload = initialize;
</script>