Click here to Skip to main content
16,018,318 members
Articles / Web Development / ASP.NET

Exploring Globalization with jQuery

Rate me:
Please Sign up or sign in to vote.
4.82/5 (33 votes)
13 Feb 2011CPOL6 min read 193.2K   2.2K   77   47
This article discusses another official plugin of jQuery that is Globalization

Table of Contents

Introduction

Recently, Microsoft announced three jQuery plugins as Official plugins.

  • jQuery Client Templating
  • Data linking
  • Globalization

I found all of them very cool features for web development. I have already written articles about the first two. Please find the links below:

I think you all must have found the above articles very useful and will be using them in the near future or some of you might have started using this. I would request you all to share your views about the article, which will be very helpful for me to write better.

Now, in this article, I am going to discuss the last feature, that is Globalization. When we say Globalization, the thing that comes in our mind is resource files. ASP.NET itself provides very good facility to cater to the needs of Globalization. But it requires a postback, so it doesn't look nice and not good in performance as well.

jQuery also provides us a way to implement the globalization, with supported plugin.

Again, I am writing a few common points that I wrote in my last two articles for new readers.

What is Globalization

As per MSDN, "Globalization is the process of designing and developing applications that function for multiple cultures."

So Globalization allows us to develop an application, which provides the option to localise the application in different cultures/languages. Now, as we are working in the global environment and serving the entire world, it becomes a necessity to provide the globalization feature to our application.

So in this article, I am going to discuss how we can provide the Globalization feature with the help of jQuery.

Prerequisite

  • jQuery library
  • Plugin for Globalization

jQuery already comes with VS2008/2010. But if you are working VS 2005, then you can download from the following link:

To download the plugin for Globalization, click here.

Globalization with jQuery

So in this article, I am going to discuss how we can utilise the Globalization feature of jQuery.

jQuery provides us with the power to format and parse date, number and currencies in different cultures. jQuery plugin defines over 350 cultures that are currently supported by the plugin.

There are languages that are common in few regions/countries, but the formatting of numbers, currencies and date varies. Like English is spoken in several countries USA, UK and other various European countries. For these, we have several cultures defined, that is used to identify the uniqueness amongst these countries.

This plugin comes in two flavors.

One file jQuery.glob.all.js includes around 350 cultures currently. So with this, we need to include only this file for all the cultures supported by the plugin. Another way, Plugin has also culture specific js files, that can be included based on cultures that are supported by the application.

Some Common APIs of the Plugin

  • jQuery.culture: This holds the culture information that is currently set and is used in default case, i.e., while formatting various values, this culture is used if no culture is specified.
  • jQuery.preferCulture: This method is used to set the culture that user prefers and this culture is used for all the formatting, parsing, etc. done on the page. Actually, as the method name suggests, it selects the best match culture whose JavaScript is included in the page.
  • jQuery.format: This method is used to format the date, number and currency in the given format string. This method is widely used.
  • jQuery.findClosestCulture: This method works in similar way as preferCulture but it returns the best matching culture and does not set the jQuery.culture to it.
  • jQuery.localize: This method allows us to extend the specific culture and returns or sets the localized value.

There are many more functions like jQuery.parseInt,jQuery.parseFloat, jQuery.parseDate, etc. provided by the plugin, that can be used for several specific purposes. I have discussed some of them.

Let's See Some Examples

Here in this section, I'll be showing you some examples.

First Example: In this example, I am displaying the stock details of Infosys on a specific date. It includes the price and number of units sold on a specific date in two different cultures. Let's see the running application.

Static

Now let's move to the code. First let's see the aspx code:

HTML
<table style="border:1px solid black; font-family:Verdana; font-size:small">
     <tr>
         <td colspan="2"><h3>English - US</h3></td>
     </tr>
     <tr>
         <td>Stock Name</td>
         <td><span id="Text1" >Infosys</span></td>
     </tr>
     <tr>
         <td>Stock Price </td>
         <td><span id="price"/></td>
     </tr>
     <tr>
         <td>Day</td>
         <td><span id="date"/></td>
     </tr>
     <tr>
         <td>Units Transacted</td>
         <td><span id="unitsTransacted" /></td>
     </tr>
     <tr>
         <td colspan="2"><h3>France - French </h3></td>
     </tr>
     <tr>
         <td>Stock Name</td>
         <td><span id="Span1">Infosys</span></td>
     </tr>
     <tr>
         <td>Stock Price </td>
         <td><span id="price1"/></td>
     </tr>
     <tr>
         <td>Date</td>
         <td><span id="date1"/></td>
     </tr>
     <tr>
         <td>Units Transacted</td>
         <td><span id="unitsTransacted1" /></td>
     </tr>
 </table>

As you can see above, I am displaying Stock details of Infosys in two different cultures English-US and France-French. Now let's jump to script. Here are the scripts that I have included. These are:

HTML
<script src="scripts/jquery-1.4.2.js" type="text/javascript"></script>
<script src="scripts/jquery.glob.js" type="text/javascript"></script>
<script src="scripts/globinfo/jQuery.glob.all.js" type="text/javascript"></script>

So I have included three files here. First the jQuery file, the common Global file and last one is the file that contains all culture specific details. Now rest of the JavaScript code is:

JavaScript
// Set culture
jQuery.preferCulture("en-US");

// Formatting price
var price = jQuery.format(3899.888, "c");
//Assigning stock price to the control
jQuery("#price").html(price);

// Formatting date 
var date = jQuery.format(new Date(2010, 11, 15), "D");
//Assigning date to the control
jQuery("#date").html(date);

// Formatting units transacted
var units = jQuery.format(45678.576, "n2");
//Assigning units to the control
jQuery("#unitsTransacted").html(units);

// Set culture
jQuery.preferCulture("fr-FR");

// Format price
var price = jQuery.format(3899.888, "c");
//Assigning stock price to the control
jQuery("#price1").html(price);

// Format date available
var date = jQuery.format(new Date(2010, 11, 15), "D");
//Assigning date to the control
jQuery("#date1").html(date);

// Format units in stock
var units = jQuery.format(45678.576, "n2");
//Assigning units to the control
jQuery("#unitsTransacted1").html(units);  

As you can see from the above code, I have used the preferCulture method to set the culture and format method to format the various data like price, date and units here.

So above is the simple example which describes how the plugin works.

Changing Culture Dynamically

Now in this example, I am talking about another scenario where user may want to select the culture dynamically, and wants to get the page updated accordingly.

In my sample example, I have one dropdown, user selects the culture and page is gets updated accordingly. First let's see the application.

Dynamic Culture

Now let's jump to the code. First let's view the aspx code:

HTML
<table style="border:1px solid black; font-family:Verdana; font-size:small">
          <tr>
              <td style="font-weight:bold">Select Culture</td>
              <td>
                  <select id="ddlCultures">
                      <option value="en-US">English - US</option>
                      <option value="en-IN">EngLish - India</option>
                      <option value="en-AU">EngLish - Australia</option>
                      <option value="fr-FR">French - France</option>
                      <option value="es-MX">Spanish - Mexico</option>
                  </select>
              </td>
          </tr>
          <tr>
              <td style="font-weight:bold">Stock Name</td>
              <td> <span id="Text1">Infosys </span></td>
          </tr>
          <tr>
              <td style="font-weight:bold">Stock Price</td>
              <td><span id="price"/></td>
          </tr>
          <tr>
              <td style="font-weight:bold">Day</td>
              <td><span id="date"/></td>
          </tr>
          <tr>
              <td style="font-weight:bold">Units Transacted</td>
              <td><span id="unitsTransacted"/></td>
          </tr>
      </table>

Now let's see the scripts included:

HTML
<script src="scripts/jquery-1.4.2.js" type="text/javascript"></script>
<script src="scripts/jquery.glob.js" type="text/javascript"></script>
<script src="scripts/globinfo/jQuery.glob.en-US.min.js" type="text/javascript"></script>
<script src="scripts/globinfo/jQuery.glob.en-IN.min.js" type="text/javascript"></script>
<script src="scripts/globinfo/jQuery.glob.en-AU.min.js" type="text/javascript"></script>
<script src="scripts/globinfo/jQuery.glob.fr-FR.min.js" type="text/javascript"></script>
<script src="scripts/globinfo/jQuery.glob.es-MX.min.js" type="text/javascript"></script>

As you can see above, I have included culture specific files instead of one common file for all the cultures because the size of common files for all 350 cultures could be a performance overhead. As we know, these are specific cultures that are going to be used in the application, then we should go for culture specific files.

Now the JavaScript code:

JavaScript
LoadPage("en-US");

jQuery("#ddlCultures").change(function() {
    var selectedCulture = this.value;
    LoadPage(selectedCulture);
});

   function LoadPage(selectedCulture) {

       jQuery.preferCulture(selectedCulture);

       var price = $.format(3899.888, "c");
       jQuery("#price").html('12345');

       // Format date available
       var date = $.format(new Date(2011, 12, 25), "D");
       jQuery("#date").html(date);

       // Format units in stock
       var units = $.format(45678, "n0");
       jQuery("#unitsTransacted").html(units);
   }

In this code, I have taken a dropdown with multiple cultures. One can select the desired culture and the page will be modified accordingly. I have used the same form but I have called preferculture method based on the selection of dropdown.

Rest of the code is he same as the above example. 

Note: You can find the complete sample in the attachment.

Picking Culture Info from Browser

Sometimes, user also sets culture preferences in the browser. And lots of applications rely on it. So we can also read the culture information from the browser and can load the page accordingly. To get the culture information, we can use the following:

JavaScript
var language = "<%= Request.UserLanguages[0] %>";
jQuery.preferCulture(language);

Conclusion

This feature is very useful for the applications targeting the entire Globe. As you are moving forward towards RIA applications, this plugin of jQuery could be key.

Feedback and Suggestions

Hope you have enjoyed my above article. Please share your valuable feedback that will help me a lot to write better.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Software Developer (Senior)
India India
Brij is a 3-times Microsoft MVP in ASP.NET/IIS Category and a passionate .NET developer. More than 6 years of experience in IT field, currently serving a MNC as a Tech Lead/Architect.

He is a very passionate .NET developer and have expertise over Web technologies like ASP.NET 2.0/3.5/4.0, jQuery, JSON, Javascript, IIS and related technologies. He is also a Exchange Server (EWS) Specialist. He has great experience in design patterns and N-Tier Architecture.

He is also certified as Microsoft Certified Technologies Specialist-ASP.NET and Microsoft Certified Technologies Specialist-WCF in .NET 4.0. He has also received several awards at various forums and his various articles got listed as "Article of the day" at ASP.NET Microsoft Official Website www.asp.net.

He has done MCA from NIT Durgapur and completed his graduation from Lucknow University.

Learning new technologies and sharing knowledge excites him most. Blogging, solving problems at various forums, helping people, keeps him busy entire day.


Visit his Blog: Code Wala

Area of Expertise :
C#, ASP.NET 2.0,3.5,4.0, AJAX, JQuery, JSON, XML, XSLT, ADO.Net, WCF, Active Directory, Exchange Server 2007 (EWS), Java script, Web Services ,Win services, DotnetNuke, WSS 3.0,Sharepoint Designer, SQL Server 2000/2005/2008

Comments and Discussions

 
QuestionHelp needed in getting Language Specific data from Wikipedia Pin
bca102314-Apr-17 22:55
bca102314-Apr-17 22:55 
QuestionIs there any way to convert currency format again to decimal for any type of currency? ( $120,000.36, 120.000,36) Pin
sasikala kesavan19-Oct-15 19:29
sasikala kesavan19-Oct-15 19:29 
QuestionQuestion regarding Globalisation Pin
Member 109902437-Aug-14 19:55
Member 109902437-Aug-14 19:55 
GeneralMy vote of 5 Pin
sumit_kapadia17-Jul-13 4:02
sumit_kapadia17-Jul-13 4:02 
GeneralMy vote of 4 Pin
Rockstar_18-Jun-13 18:29
professionalRockstar_18-Jun-13 18:29 
GeneralMy vote of 5 Pin
Sudhakar Shinde25-Apr-13 20:54
Sudhakar Shinde25-Apr-13 20:54 
GeneralMy vote of 5 Pin
Abinash Bishoyi6-Mar-13 4:26
Abinash Bishoyi6-Mar-13 4:26 
Questionhow to convert entire web application in multiple languages Pin
samabc5-Oct-11 21:25
samabc5-Oct-11 21:25 
GeneralMy vote of 5 Pin
mhamad zarif3-Aug-11 1:34
mhamad zarif3-Aug-11 1:34 
GeneralNice Article Pin
slSoftware5-Apr-11 2:09
slSoftware5-Apr-11 2:09 
GeneralMy vote of 5 Pin
Marcelo Ricardo de Oliveira31-Mar-11 3:33
Marcelo Ricardo de Oliveira31-Mar-11 3:33 
GeneralRe: My vote of 5 Pin
Brij31-Mar-11 3:36
mentorBrij31-Mar-11 3:36 
GeneralNice article my rating 5 Pin
Anand Mithun15-Mar-11 21:23
Anand Mithun15-Mar-11 21:23 
GeneralRe: Nice article my rating 5 Pin
Brij16-Mar-11 7:29
mentorBrij16-Mar-11 7:29 
GeneralMy vote is 5 Pin
Sunasara Imdadhusen7-Mar-11 22:43
professionalSunasara Imdadhusen7-Mar-11 22:43 
GeneralRe: My vote is 5 Pin
Brij8-Mar-11 1:19
mentorBrij8-Mar-11 1:19 
GeneralGood one Brij Pin
aamironline13-Feb-11 22:09
aamironline13-Feb-11 22:09 
GeneralRe: Good one Brij Pin
Brij13-Feb-11 22:32
mentorBrij13-Feb-11 22:32 
GeneralMy vote of 5 Pin
Bryian Tan12-Feb-11 3:31
professionalBryian Tan12-Feb-11 3:31 
GeneralRe: My vote of 5 Pin
Brij13-Feb-11 5:32
mentorBrij13-Feb-11 5:32 
GeneralNice article Pin
RageMage12-Feb-11 1:45
RageMage12-Feb-11 1:45 
GeneralRe: Nice article Pin
Brij13-Feb-11 5:44
mentorBrij13-Feb-11 5:44 
GeneralThat is good but Pin
Yves7-Feb-11 14:14
Yves7-Feb-11 14:14 
GeneralRe: That is good but Pin
Brij8-Feb-11 6:00
mentorBrij8-Feb-11 6:00 
GeneralMy vote of 5 Pin
MDNadeemAkhter3-Feb-11 2:45
MDNadeemAkhter3-Feb-11 2:45 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.