boulepick boulepick - 4 months ago 119
Javascript Question

i18next jquery help migrating to i18next jquery v3.0.0

Good day all,

i need a little bit of help migrating from i18next jquery 1.11.1 to version 3.0.0
currently this is my setup

<!-- Core JS files -->
<script type="text/javascript" src="../js/jquery-2.2.4.min.js"></script>
<script type="text/javascript" src="../js/i18next.min.js"></script> (v1.11.1)

$(function(){
// i18next Configuration
// -------------------------
var namespaces = ["nav" ,"common" ];
var options = {
ns: {
namespaces: namespaces,
defaultNs: namespaces[0]
},
resGetPath: '../assets/locales/__ns__/__lng__.json',
debug: false,
load: 'unspecific',
detectLngQS: 'lang',
fallbackLng : 'en',
cookieName: 'applang',
//cookieExpirationTime : ,
useLocalStorage: false,
cookieDomain: '*.mydomain.com',
useCookie: true,
lngWhitelist: ['en','es', 'de', 'fr']
};
i18n.init(options ,function (err,t) {
$('body').i18n(); // Init 18n

});
})


and when i want to load additional namespace i do this

var namespaces = ["newFile"];
i18n.loadNamespaces(namespaces, function (err, t) {
// init i18n
$('body').i18n();
.............. other stuff in here
})


but when i try to use the latest i18next v3 with the jquery-i18next (https://github.com/i18next/jquery-i18next) keeping the same logic i get errors on the loadNamespaces function (Uncaught TypeError: namespaces.forEach is not a function), below is the new setup

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.js" ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/i18next/3.0.0/i18next.min.js" ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-i18next/0.0.2/i18next-jquery.min.js" ></script>

i18next
.use(i18nextXHRBackend)
.init({
lng: 'de',
backend: {
loadPath: '../assets/locales/{{lng}}/{{ns}}.json'
}
}, function(err, t) {
jqueryI18next.init(i18next, $);
$('.body').localize();

});

var namespaces = ["newFile"];
i18n.loadNamespaces(namespaces, function (err, t) {
// init i18n
$('body').localize();
.............. other stuff in here
})

Answer

For anyone interested here is my solution

<script type="text/javascript" src="../assets/js/core/libraries/jquery-2.2.4.min.js"></script>
<script type="text/javascript" src="../assets/js/plugins/internationalization/i18next.min-v3.3.1.js"></script>
<script type="text/javascript" src="../assets/js/plugins/internationalization/jquery-i18next.js"></script>
<script type="text/javascript" src="../assets/js/plugins/internationalization/i18nextXHRBackend.min.js"></script>
<script type="text/javascript" src="../assets/js/plugins/internationalization/i18nextBrowserLanguageDetector.min.js"></script>
<script type="text/javascript" src="../assets/js/plugins/internationalization/i18nextLocalStorageCache.min.js"></script>
<script type="text/javascript" src="../assets/js/plugins/internationalization/i18nextIntervalPluralPostProcessor.min.js"></script>

$(function(){
    // i18next Configuration
    // -------------------------
var namespaces = ["nameSpace1" ,"NameSpace2" ],
    cacheOptions = {
        // turn on or off
        enabled: true, // prefix for stored languages
        prefix: 'i18next_res_',
        expirationTime: 1*24*60*60*1000 // expiration
    },
    lngDetectionOption = {
        //order and from where user language should be detected
        order: ['querystring', 'cookie', 'localStorage', 'navigator', 'htmlTag'],
        //keys or params to lookup language from
        lookupQuerystring: 'lng',
        lookupCookie: 'i18next',
        lookupLocalStorage: 'i18nextLocalStorage',
        //cache user language on
        caches: ['localStorage','cookie'],
        // optional expire and domain for set cookie
        cookieMinutes: 365*24*60, // 1 year
        cookieDomain: 'myDomain',
        // optional htmlTag with lang attribute, the default is:
        htmlTag: document.documentElement
    },
    i18nextoptions = {
        compatibilityJSON: 'v2',
        debug: true,
        whitelist : ['en','es', 'de', 'fr'],
        ns: namespaces,
        load: 'unspecific',
        fallbackLng : 'en',
        detection: lngDetectionOption,
        backend: {loadPath: '../assets/locales/{{ns}}/{{lng}}.json'},
        //cache : cacheOptions
    };

i18next
    .use(i18nextBrowserLanguageDetector)
    .use(i18nextXHRBackend)
    .use(Cache)
    .use(i18nextIntervalPluralPostProcessor)
    .init(i18nextoptions, function (err, t) {
        var options = $().jqueryI18nextOptions;
        //init jquery-i18next
        jqueryI18next.init(i18next, $,options);

        $('body').i18n(); // Init 18n

    })
})