[ACCEPTED]-Localization with JQuery?-localization

Accepted answer
Score: 16

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


// your script logic

// language texts

You can 9 define all language files like that:

LANG = {
    txt1: 'English text1',
    txt2: 'English text2'

Make 8 sure you are including only one of those 7 in your HTML and make sure to include language 6 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 5 texts in your main script for example:

$(document).ready(function () {

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

Score: 8

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

Example from the README:


<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>


  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" })
Score: 3

You actually don't need JQuery at all.

The 10 navigator object in javascript (http://www.comptechdoc.org/independent/web/cgi/javamanual/javanavigator.html) contains 9 a userLanguage(IE) and language(Netscape/Firefox) property 8 that is set by the browser's current locale.

To 7 solve your example you could use something 6 like;

  var textToSet = null;
  var userLang = null;

  -if userLanguage exists they're in IE, else firefox
  -get the first two letters in lowercase to guarantee 
   an easily evaluated base language
  if(navigator.userLanguage) baseLang = substring(navigator.userLanguage,0,2).toLowerCase();
  else baseLang = substring(navigator.language,0,2).toLowerCase();

  //check languages
    case "de":
      textToSet = "german text";
      textToSet = "english text";
  document.getElementById('elementToSetTextInto').innerHTML = textToSet;

Keep in mind, you might want different 5 text based off of base language and locale.. in 4 that case look for "en-us", "de-de". Sites 3 for culture codes are easily googled (1 2 link on first post only ;))

Hope that works 1 out for ya.

Score: 1

Since you already use gettext with your 5 php application, you should look into using 4 this javascript implementation of gettext

It doesn't use the compiled .mo files 3 but it will use your .po files you already 2 have.

This method has the advantage of managing 1 all your translations in one place.

Score: 0

Give this a try. The TranslateThis Button 3 is a lightweight Javascript translation 2 widget. It translates any page quickly using 1 AJAX and the Google Language API.


Score: 0

Another option you could look into is the 2 Microsoft proposed jquery-global plugin. It is still in beta 1 mind.

More Related questions