DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Please enter at least three characters to search
Refcards Trend Reports
Events Video Library
Refcards
Trend Reports

Events

View Events Video Library

Zones

Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks

Modernize your data layer. Learn how to design cloud-native database architectures to meet the evolving demands of AI and GenAI workkloads.

Secure your stack and shape the future! Help dev teams across the globe navigate their software supply chain security challenges.

Releasing software shouldn't be stressful or risky. Learn how to leverage progressive delivery techniques to ensure safer deployments.

Avoid machine learning mistakes and boost model performance! Discover key ML patterns, anti-patterns, data strategies, and more.

Related

  • Ultimate Guide to FaceIO
  • Electron Js + jQuery + Bootstrap - Dev to Build
  • Improving ui-select Control
  • Immutability in JavaScript — When and Why Should You Use It

Trending

  • Building Scalable and Resilient Data Pipelines With Apache Airflow
  • Microsoft Azure Synapse Analytics: Scaling Hurdles and Limitations
  • Docker Model Runner: Streamlining AI Deployment for Developers
  • Recurrent Workflows With Cloud Native Dapr Jobs
  1. DZone
  2. Coding
  3. JavaScript
  4. Internationalization Using jquery.i18n.properties.js

Internationalization Using jquery.i18n.properties.js

By 
Davinder Singla user avatar
Davinder Singla
·
Dec. 15, 14 · Interview
Likes (13)
Comment
Save
Tweet
Share
58.0K Views

Join the DZone community and get the full member experience.

Join For Free

Internationalization refers to automatically showing localized text in your pages for users visiting your site from different regions in the world or localizing the site content based on the language preference chosen by the user.

These days most of the web applications are designed to provide rich user experience. With this, the use of JavaScript based UI components has increased many folds. We often need to support internationalization on these JavaScript based Rich Internet Applications (RIA). While looking for JavaScript based internationalization solution I came across a very good jQuery plugin jquery.i18n.properties.js. This plugin uses .properties files to localize the content into different languages. In this tutorial I will show you how we can use this plugin.

Getting jquery.i18n.properties.js

First of all we need to download the plugin. This is quite lightweight plugin. The file size is
around 17.4 KB, but this can be minified and size will reduce to around 4.3 KB.

The plugin can be downloaded from https://github.com/jquery-i18n-properties/jquery-i18n-properties.

A minified version of the same is available at http://code.google.com/p/jquery-i18n-properties/downloads/list

Internationalization Demo

The first step as with all JavaScript libraries is to include the JavaScript into HTML. Jquery.i18n.properties.js is a jQuery plugin; hence we need to include jQuery also into HTML before jquery.i18n.properties.js like shown below:

<HEAD>
        <script type="text/javascript" src="js/jquery-1.10.2.js"></script>
        <script type="text/javascript" src="js/jquery.i18n.properties.js"></script>
</HEAD>

Sample HTML Code

Before discussing on how to use jquery.i18n.properties.js, let us first create a sample HTML that we will use later. The sample HTML below has a dropdown which allows the user to choose a language. The sample HTML displays two messages which would be localized based on the language chosen from the dropdown.

<BODY>
        <h2 style="text-align: center; color:#777;">Internationalization using jQuery.i18n.properties</h2>

        <div style="margin-left: 20px; margin-bottom: 20px;" id="langBox">
            Language:
            <select id="lang">
                <option value="browser" selected>Browser Default</option>
                <option value="en">en</option>
                <option value="de_DE">de_DE</option>
                <option value="es_ES">es_ES</option>
                <option value="fr">fr</option>

            </select>
        </div>
        <div style="margin-left: 20px;" id="msg_welcome">Welcome to the Demo Site!</div><br>
        <div style="margin-left: 20px;" id="msg_selLang">Your Selected Language is: Default </div>
</BODY>

Define .properties files

The jquery.i18n.properties.js plugin consumes .properties files for doing text translations. We will use the following .properties files in this demo.

Messages.properties
msg_welcome = Welcome to the Demo Site!
msg_selLang = Your Selected Language is: {0}

Messages_es_ES.properties
msg_welcome = Bienvenido al sitio de demostración!
msg_selLang = El idioma seleccionado es: {0}

Loading localized strings from .properties

Now we have everything ready to use the plugin, let us see how we can use this plugin to load the translated strings from properties files. The below code sample is used to load the resource bundle properties file using jquery.i18n.properties.js

$.i18n.properties({ 
name: 'Messages', 
path: 'bundle/', 
mode: 'both', 
language: lang, 
callback: function() { 
$("#msg_welcome").text($.i18n.prop('msg_welcome')); $("#msg_selLang").text($.i18n.prop('msg_selLang', lang)); 
}
 });

The below table provides details about the various options available for $.i18n.properties() (source: http://codingwithcoffee.com/?p=272)

Option Description Notes 
name Name (or names) of files representing resource bundles
(eg, ‘Messages’ or ['Msg1','Msg2'])
Required
String or String[]
language
ISO-639 Language code and, optionally, ISO-3166
country code (eg, ‘en’, ‘en_US’, ‘pt_PT’). If not specified, language reported by the browser will be used instead.
Optional
String
pathPath to directory that contains ‘.properties‘files
to load.

Optional
String

mode
Option to have resource bundle keys available as JavaScript
variables/functions OR as a map. Possible options: ‘vars’ (default), ‘map’ or ‘both’.
Optional
String
callback
Callback function to be called upon script execution
completion
Optional
function()

Here mode is set to ‘both’ hence the messages can be fetched using map approach as well as JavaScript variables/functions. In the above code sample we used map to retrieve the translated text. The same can be achieved using JavaScript variables/functions as shown below:

$("#msg_welcome").text(msg_welcome); 
$("#msg_selLang").text(msg_selLang(lang));

String parameterization

Jquery.i18n.properties.js also supports parameterization of messages. This we have already used in the sample above for the second message.

$("#msg_selLang").text($.i18n.prop('msg_selLang', lang));

In the properties file the message is defined as

msg_selLang = Your Selected Language is: {0}

Here {0} is replaced by the argument ‘lang’ value. As in java resource bundles, we can use multiple {} to define custom messages with multiple parameters.

The final output

The following screen shots show the output of this demo. The below screen shot is of the default page

When the language in drop down is changed to es_ES the text from Message_es_ES.properties is read and displayed as shown below:

Advantages of jquery.i18n.properties.js

  • The main advantage of this plugin is that it uses .properties files for internationalization. This is helpful as same properties files could be shared with other parts of the program.
  • The support of parameterization of strings is also beneficial as this enables one to have     complex multilingual strings.
  • Has option to use map as well as JavaScript variables/functions for retrieving translated     strings.
  • The plugin is very lightweight and can be easily used with any HTML as it is jQuery based.
HTML JavaScript application JQuery Strings Knowledge base Property (programming) Translation

Opinions expressed by DZone contributors are their own.

Related

  • Ultimate Guide to FaceIO
  • Electron Js + jQuery + Bootstrap - Dev to Build
  • Improving ui-select Control
  • Immutability in JavaScript — When and Why Should You Use It

Partner Resources

×

Comments
Oops! Something Went Wrong

The likes didn't load as expected. Please refresh the page and try again.

ABOUT US

  • About DZone
  • Support and feedback
  • Community research
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Core Program
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 3343 Perimeter Hill Drive
  • Suite 100
  • Nashville, TN 37211
  • support@dzone.com

Let's be friends:

Likes
There are no likes...yet! 👀
Be the first to like this post!
It looks like you're not logged in.
Sign in to see who liked this post!