Jquery i18next translation issue

Question

I am developing a nodejs app.

Here is how I initialize i18next in app.js:

var i18n = require('i18next');
i18n.init({
saveMissing: true,
debug: true
});

Here is my js code:

...
    // display strength based on score
    switch (strength.score) {
    case 0:
        $('#strength-meter').removeClass()
        $('#strength-meter').addClass('progress-bar progress-bar-danger')
        $('.progress .progress-bar').css('width', '25%')
        return 'very weak'
        break;
...

I have tried using "return i18n.t('app.phlastname');". I get "Uncaught ReferenceError: i18n is not defined." error

What am I doing wrong? Thanks in advance.

UPDATE

I changed my code so that it works on the clientside. I included the i18n lib in my page. and updated my javascript/jquery code to this:

$.i18n.init({
  debug: true
  }, function(t) {
     return t("app.lblname");
});

So now I don't seem to get the above mentioned error, however I am not getting text.

When not using translation I get something like this:

If the variable declaration is not in the same file as the checkStrength() function, it's not going to work (variables are local to modules). You need to declare your i18n variable as global! — Adrien
I have defined that in app.js file. How do I make it global. I am new to javascript and nodejs. — Gaurav Pandey
You can follow this: github.com/i18next/i18next-webtranslate/blob/master/server.js — Adrien

Gaurav Pandey Gaurav Pandey · Accepted Answer · 2015-10-02T17:38:29

I was able to find the answer to my question.

The problem was, that I was returning the translated string from inside the function and hence outside of the scope where it was intended to be displayed.

So I initialized it separately (say in document.ready)

$.i18n.init({
        useCookie: false,
        debug: true,
        resGetPath: 'locales/__lng__/translation.json'
    });

and then used it separately,

return $.i18n.t("app.lblname");

Jquery i18next translation issue

1 Answers