Localization with JQuery?

Question

I have no idea how to handle localization with JQuery. I want to set an innerHTML with German text, but if the browser is configured to use English, then I want to set English text.

In PHP I use gettext for such stuff, but how to do it in JavaScript/jQuery?

Answer 1

There is no easy solution for that. What I would probably do is create several scripts with language texts for every language and include proper one in PHP. So if someone is using english version of your site you would include only english file, if someone is using german version you would include german language file etc.

Example:

// your script logic
myscript.js

// language texts
myscript.en.js
myscript.de.js
myscript.it.js
...

You can define all language files like that:

LANG = {
    txt1: 'English text1',
    txt2: 'English text2'
    ...
};

Make sure you are including only one of those in your HTML and make sure to include language file first i.e.

<script type="text/javascript" src="myscript.de.js"></script>
<script type="text/javascript" src="myscript.js"></script>

Then you can use those localized texts in your main script for example:

$(document).ready(function () {
    alert(LANG.txt1);
});

What's best about it is that your logic (myscript.js in this example) doesn't have to worry about localization and you won't have to change it if you want to add a new language file.

Answer 2

I've not used it yet, but I'm thinking about using jquery-localize for a project. If you don't mind basing the translation on 'rel' attributes defined on your elements then it looks like a good option.

Example from the README:

HTML

<p rel="localize[title]">Tracker Pro XT Deluxe</p>
<p rel="localize[search.placeholder]">Search...</p>
<p rel="localize[search.button]">Go!</p>
<p rel="localize[footer.disclaimer]">Use at your own risk.</p>
<p rel="localize[menu.dashboard]">Dashboard</p>
<p rel="localize[menu.list]">Bug List</p>
<p rel="localize[menu.logout]">Logout</p>

application-es.json

{
  title: "Tracker Pro XT Deluxo",
  search: {
     placeholder: "Searcho...",
     button: "Vamos!"
  },
  footer: {
    disclaimer: "Bewaro."
  },
  menu: {
    dashboard: "Dashboardo",
    list: "Bug Listo",
    logout: "Exito"
  }
}

Localize it!

$("rel*=localize").localize("application", { language: "es" })