How to use i18next? Problems with translations
I want to use a internationalization option at my jQuery Mobile and jQuery webside. I tried to generate an example with the documentation on http://i18next.com but it seems I failed. Does anybody has experiences with i18next?
Here my example:
index.html:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<script src="jquery-mobile/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="jquery-mobile/jquery.mobile-1.0.min.js" type="text/javascript"></script>
<script src="js/i18next-1.5.6.min.js" type="text/javascript"></script>
<script src="js/translation.js" type="text/javascript"></script>
</head>
<body>
<div data-role="page" id="page">
<div data-role="content">
<div id="headline1" data-i18n="headline"></div>
<table width="100%" border="0" id="menu1" class="menu">
<tr id="surname">
<td width="50%" data-i18n="menu.surname"></td>
<td width="50%"> </td>
</tr>
<tr id="firstName">
<td width="50%" data-i18n="menu.firstName"></td>
<td width="50%"> </td>
</tr>
</table>
</div>
</div>
</body>
</html>
Translation files: /locales/de/translation.json
{
"menu": {
"surname": "Name:",
"firstName": "Vorname:"
},
"headline": "Daten:",
"headline_1": "Daten Allgemein:",
"headline_2": "Daten Speziell:"
}
/locales/en/translation.json
/locales/dev/translation.json
{
"menu": {
"surname": "Name:",
"firstName": "First Name:"
},
"headline": "Data:",
"headline_1": "Daten Common:",
"headline_2": "Daten Specific:"
}
/js/translation.js
$(document).ready(function(){
language_complete = navigator.language.split("-");
language = (language_complete[0]);
console.log("Sprache (root): %s", language);
i18n.init({ lng: language });
i18n.init({ debug: true });
$(".menu").i18n();
$("headline").i18n();
});
The translation for the menu I get is "menu.name" instead of expected "Name:". For the headline I get no translation but I expected "Data:" or "Daten:".
If i try the following direct call I get no translation: i18n.t("menu.surname", { defaultValue: "Name:"});
Does anybody know what the problem is? Or does anybody has a working example that fits what I try to do?
Answer
Main problem is you can't call i18n.t("menu.surname", { defaultValue: "Name:"}); directly after initialization, as loading the resources from server is async, so basically you try to translate before i18next fetched the resources.
Instead load it with callback:
$(document).ready(function(){
language_complete = navigator.language.split("-");
language = (language_complete[0]);
console.log("Sprache (root): %s", language);
i18n.init({ lng: language, debug: true }, function() {
// save to use translation function as resources are fetched
$(".menu").i18n();
$("headline").i18n();
});
});
or use flag to load resources synchron.
By the way:
Your html code has one closing </div> too many.
The call to $("headline").i18n(); should be $("#headline").i18n();.