Hi.
I was trying your jquery-i18next module and I noticed that if a string contains the character ":", the translation will not be made. When we activate the debug option, we can see in the console log that it tries to translate the string without the ":" character. And because in the json resource file the string contains the ":" character, i18next don't find the translation for that string.
For example, if I have this line:
<title class="MyTest" data-i18n="Yeeahh: My First Translated Web Page"></title>
jquery-i18next will try to translate "Yeeahh My First Translated Web Page"
(without the ":" character) instead of "Yeeahh: My First Translated Web Page"
(with the ":" character)
(or maybe it tries to translate only the string in the right-side of the ":" character: "My First Translated Web Page"
)
Here is what we can find in the json resource file (for french language for example)
{
"Yeaahh: My First Translated Web Page": "Yeaahh: Ma première page web traduite",
"Choose your favorite application:": "Choisissez votre application favorite:"
}
And Here is my web page (HTML):
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US">
<head>
<script type="text/javascript" src="lib/i18next.js"></script>
<script type="text/javascript" src="lib/i18nextXHRBackend.js"></script>
<script type="text/javascript" src="lib/i18nextBrowserLanguageDetector.js"></script>
<script type="text/javascript" src="lib/jquery.min.js"></script>
<script type="text/javascript" src="lib/jquery-i18next.min.js"></script>
<script type="text/javascript">
var i18nextOptions = {
load:['en-US', 'fr', 'es'],
whitelist:['en-US', 'fr', 'es'],
fallbackLng: 'en-US',
ns:'Web_Server',
defaultNS:'Web_Server',
backend: {loadPath: '/language/static/{{lng}}/{{ns}}.json', addPath: 'language/static/add/{{lng}}/{{ns}}.json'},
detection: {order: ['querystring', 'cookie', 'navigator', 'localStorage'],
lookupQuerystring: 'lng',
lookupCookie: 'i18next',
lookupLocalStorage: 'i18nextLng',
caches: ['localStorage', 'cookie'],
cookieMinutes: 5},
debug: true
};
i18next
.use(i18nextXHRBackend)
.use(i18nextBrowserLanguageDetector)
.init(i18nextOptions, function(err, t){
jqueryI18next.init(i18next, $);
$('.MyTest').localize();
});
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf8" />
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title class="MyTest" data-i18n="Yeaahh: My First Translated Web Page"></title>
<link rel="stylesheet" href="lib/bootstrap-3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="lib/bootstrap-3.1.1/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="css/style.css"/>
</head>
And Finally, this is what we can see in the console log:
i18next::backendConnector: loaded namespace My_Web_Server for language fr Object
i18next.js:111 i18next::backendConnector: loaded namespace My_Web_Server for language en-US Object
i18next: languageChanged fr
i18next: initialized Object {debug: true, ns: Array[1], defaultNS: "My_Web_Server", fallbackLng: Array[1], fallbackNS: false…}
i18next::translator: missingKey fr Yeeahh My First Translated Web Page My First Translated Web Page
i18next::translator: missingKey fr Choose your favorite application
For the string "Yeeahh: My First Translated Web Page", in the console log, I don't know if it's an error from the module, but the log looks a little bit weird:
i18next::translator: missingKey fr Yeeahh My First Translated Web Page My First Translated Web Page
You can see that "My First Translated Web Page" is repeated twice. It's not so bad but for the eyes, you know... ;-)
Thank you in advance for your answer :-)