Menu
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?
470
I18next is an internationalization-framework written in and for JavaScript. But it's much more than that. i18next goes beyond just providing the standard i18n features such as (plurals, context, interpolation, format). It provides you with a complete solution to localize your product from web to mobile and desktop.
i18next is an i18n framework written in and for JavaScript. It provides the standard i18n features of interpolation, formatting, and handling plurals and context. A 30,000 foot view of i18next would be that it provides a function that takes a key, some options, and returns the value for the current language.
Interpolation. Interpolation is one of the most used functionalities in I18N. It allows integrating dynamic values into your translations. Per default, interpolation values get escaped to mitigate XSS attacks.
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();.
83
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
