<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>
<td id="firstParagraph">
As mentioned in the previous demo 'Translating Elements', not only can you translate
specific elements but through AJAX you can use the Microsoft Translator to exclude
specific elements from translation. This is extremely helpful if you want to
translate the majority of a page but keep one or two elements in your chosen language.
Excluding an element from translation is achieved by adding 'translate="no"' to
the element you do not want translated.
</td>
</tr>
<tr />
<tr>
<td id="secondParagraph">
This exclusion of elements is demonstrated through the example below, simply select
the language you would like to translate to and click the translate button. The
result will be the first two paragraphs of this demo will be translated to your
chosen language, while the third which has the 'translate="no"' added to the element
will remain in English.
</td>
</tr>
<tr>
<td id="thirdParagraph" translate="no">
For this example, this paragraph will remain in English. After trying the demo click
on the ASPX tab above to see exactly how this has been accomplished in 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 to the translate all function -->
<asp:button id="btnParagraph2" runat="server" onclientclick="translateAll();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 all method
function translateAll() {
// helper function to get value from dropdownlist
var lang = GetSelectedLanguage();
// Check if the current language is equal to the language to translate to
if (currentLanguage != lang) {
Microsoft.Translator.translate(document.body, currentLanguage,
lang, null);
// update currentLanguage value
// update currentLanguage value
currentLanguage = lang;
}
}
// Call the initialize funtion on page load
window.onload = initialize;
</script>