Handling multilanguage with JQuery only

Question

I use JQuery in my web app and I am wondering what the best way to handle multilanguage in that context is.
I was thinking of creating a file like:

label["login"]["fr"]="Connection"
label["login"]["en"]="Login"

Once the file is loaded I will then do (for each label) a:

$('#login').text(label["login"][selected_language]);

In HTML I would then use:

<a href="login.html"><span id="login"></span></a>

Is this a correct way to do ?

Answer 1

salut luc.

I think the best way is to do it in some kind of backend :P But since you ask for a jQuery version i would use the most used language in the HTML and replace it by the other(s). I would do it like this:

Demo here: http://jsfiddle.net/mHAHz/1/ (click on fr or de to change the language)

var translation, translate;

translation = { //store your translations in a object.
    "fr": {
        "div > a:eq(0)": "un lien", // this way you are flexible (don't need to use abd id for all you contents you want to translate)
        "div h1"       : "un title",
        "p"            : "du contenu"
    },
    "de": {
        "div > a:eq(0)": "ein Link",
        "div h1"       : "ein Titel",
        "p"            : "eigen Inhalt"
    }
}

translate = function( lng,translationObj ){ //check if lng is provided and if it acually exists in the object.
    if( lng && translationObj[lng] ) {
        return $.each(translationObj[lng], function(k,v){
             $(k).text(v); 
        });
    }else{
        return $.error("make the language (lng) exists in your object");
    }
}

translate("fr", translation);

I guess i would be to lazy to maintain those objects with the language, so i would just use a language class on the elements i want to translate... (as i have done it here: http://alainbenoit.com/)

Answer 2

I think it would be better you use class and a invented attributed instead of id to control multi-language, because if you have the same text twice in the same page id would broken it because it is unique.

You can try this approach:

$(function() {
  $(".is_ml").each(function() {
    $(this).html(label[$(this).attr("ml_label")]["en"])
  })

});

Everything that is multi-language text has to have class="is_ml" and ml_label="label" where label could be "login", for example. Did you got my approach?

Answer 3

It would be correct if you closed your <span> tag :-) You could also just give the <a> the appropriate "id" value.

A scheme like this would work for a very small site, but once you have many pages, many forms, and many messages, it's going to be really hard to keep track of the messages. You probably will want to look into a templating solution so that you can incorporated data into internationalized messages (amounts, dates, etc).

Of course, there's the problem that viewers who've disabled JavaScript will only get the server-supplied default language.

Answer 4

I like Bernardo Mendes approach (answer #6), however since the sub-objects need to be initialize is better to switch the ml_label and language fields around to minimize the number of sub-objects that have to be initialize to only one per language.

Javascript:

var label = {};
label['fr'] = {};
label['en'] = {};

label["fr"]["login"]="Connection";
label["en"]["login"]="Login";
label["fr"]["firstname"]="Prénom";
label["en"]["firstname"]="First Name";
label["fr"]["lastname"]="Nom de Famille";
label["en"]["lastname"]="Last Name";

$(function() {
  $(".is_ml").each(function() {
    $(this).html(label["en"][$(this).attr("ml_label")])
  })
});

HTML:

<label class="is_ml" ml_label="login">Login</label>
<label class="is_ml" ml_label="firstname">First Name</label>
<label class="is_ml" ml_label="lastname">Last Name</label>