Internationalizing web app with jQuery i18n plugin

Question

Internationalizing web app with jQuery i18n plugin

Navigation

#1 by (5 votes)

4

I'm trying to use this jQuery plugin to internationalize my web app.

Specifically, I'm wanting to use the API data in the fields to translate but alert returns "one" and not "ONE" and the spans tags remain with One and Two.

Page

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">

<title>jQuery i18n Demo</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script><scriptsrc="../src/jquery.i18n.js"></script>
<script src="../src/jquery.i18n.messagestore.js"></script>

<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/bootstrap.min.js"></script>

<script>
    $.i18n({
        locale: 'en'
    });

    alert($.i18n("um"));
</script>
</head>

<body>
<span data-i18n="um">Um</span>.
<span data-i18n="dois">Dois</span>.
</body>
</html>

en.json

{
"um": "ONE",
"dois": "TWO"
}

Has anyone used it yet and can you help?

jquery i18n

asked by anonymous 23.09.2015 / 22:46

1 answer

How to use passport.js on node to log in against the database Remove "openfiledialog" from C #

score 5 · Accepted Answer

In order to make the code execute and internationalize it is necessary to invoke the $.i18n() function on the desired elements. To use generic (in all elements with the data-i18n attribute), use the [data-i18n] selector.

The code can be executed as follows: $('[data-i18n]').i18n() .

Example

Below is an example demonstrating the use of the plugin

$.i18n().load({
  br: {
    'welcome': 'ola mundo'
  },
  en: {
    'welcome': 'hello world'
  },
  es: {
    'welcome': 'hola mundo'
  }
});

function changeLocale(locale) {

  $.i18n({
    locale: locale
  });

  $('[data-i18n]').i18n();

}

$(function() {

  $('button').on('click', function() {

    var locale = $(this).data('locale');

    changeLocale(locale);

  });

});

changeLocale('en'); // locale default da página

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script><scriptsrc="http://thottingal.in/projects/js/jquery.i18n/src/jquery.i18n.js"></script>
<script src="http://thottingal.in/projects/js/jquery.i18n/src/jquery.i18n.messagestore.js"></script><buttontype="button" data-locale="br">br</button>
<button type="button" data-locale="en">en</button>
<button type="button" data-locale="es">es</button>

<h1 data-i18n="welcome">ola mundo (fallback)</h1>