Internationalize web app with jQuery i18n plugin

Asked

Viewed 835 times

4

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

Specifically, I want to use the data API in the fields that should be translated but the alert returns "one" and not "one" and spans continue 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>
<script src="../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"
}

Someone has used it and can help?

jquery i18n

1 answer

5


To make the code execute and perform internationalization it is necessary to invoke the function $.i18n() the desired elements. To use in a generic way (in all elements with the date-i18n attribute), use the selector [data-i18n].

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>
<script src="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>


<button type="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>

  • The same goes for using the properties in Java, you put label.teste=Teste and using the Spring you call the key label.teste to appear the text, therefore, what is the advantage and disadvantage of using both? Can the two be used in the same application? It would be good practice?

  • 1

    @Giancarlogiulian virtually every MVC framework (Struts, JSF, Spring MVC) works with i18n. The main difference is that using i18n in this way, the back-end will send the HTML already with the result of internationalization. If the user wants to change the language, the framework will perform a new request to recover the HTML again. Using the jquery plugin, the responsibility for internationalization lies with the front-end layer. Changes may or may not carry out a new request, depending on the implementation. For the vast majority of cases, only one of the solutions will already suit well.

  • Thank you @Romulo, if you manage to list more advantages and disadvantages of using one or the other would appreciate again.

  • As the language option is stored in the database and later in Session (after login), what do you think of me creating one . js for each language (en.js and pt.js) already with the initialization code (your changeLocale method) and add them to the page according to its Session?

  • @Onaiggac seems like a fully functional option

Browser other questions tagged jquery i18n

You are not signed in. Login or sign up in order to post.