Translate field names into other languages - dynamically
Translate field names into other languages - dynamically
Dirk Fincley
Posts: 38Questions: 3Answers: 0
This example shows how you can dynamically translate any of all of your datatables field names used in the insert/update screens.
All you need is a way to switch languages - here I use a drop down box and the js to define an new "lab" class - this will pull in the appropriate data names. You enter the data names once in this file and these will be picked up in all your datatable/editor CRUD screens. Just call the names what the actual fields are called and the labels in the appropriate language. All you need to do is add any new fields. The actual fields labels will be no longer enclosed in quotation marks of course but will be prefixed by "lab" so lab.address where you had "address" i the js file.
<html>
<head>
<script type="text/javascript" src="js/dtLab.js" ></script>
</head>
<body>
<select id="lang" onchange="changelang()">
<option value="en" "selected">English</option>
<option value="fr">French</option>
<option value="es">Spanish</option>
</select>
<script type="text/javascript">
function changelang() {
var lang = document.getElementById('lang').value;
var lab = new dtLab( document.getElementById('lang').value);
alert("lang: "+lang+" "+lab.name+" "+lab.address+" "+lab.price+" "+lab.age);
}
</script>
</body>
</html>
This is the dtLab.js file which is pulled into the html above to contain the data name translations. Note these are created under a "lab" object to enable them being referenced directly in the datatable js. Simply replace the label: "dataname" with label: lab.dataname to pull in the latest translation of the field name in the language selected by the select box above.
function dtLab(lang) {
switch (lang) {
case "en":
this.name = "Name";
this.address = "Address";
this.price = "Price";
this.age = "Age";
break;
case "es":
this.name = "Nombre";
this.address = "Direccion";
this.price = "Precio";
this.age = "Edad";
break;
case "fr":
this.name = "Nom";
this.address = "Addresse";
this.price = "Pris";
this.age = "Age";
break;
};
this.lab = function lab(lang)
{return lang }
}