Run-time language switching with jQuery

When you are making some enterprise apps that targets users from different countries you might need to implement live/run-time language switcher where labels for your controls will be changed instantly from one language to another, to be short and visualize the result we are looking for, i will put it this way, we need to turn this:

into this

For Single-Page-Interfaces (SPI) we need to have ability to run these transformations at run time, without having UI reloaded. I won’t explain at this moment how your design could be affected because ‘translated’ labels from one language could be longer/shorter than in another language, i think it’s quite simple thing to issue to understand and take care of so it doesn’t require my coverage here. What i want to do here is just to give you idea about one of the many ways on how to implement language switching for labels on your html controls.

First of all i suggest you to use some light-weight tagging for your labels, something like this:

<table>
<tbody>
<tr><td key="Messages.NAME">Name:</td><td><input /></td></tr>
</tbody>
</table>
<a href="#" key="Messages.YES">OK</a> | <a href="#" key="Messages.NO">Cancel</a>

Notice that i’ve added new attribute called key. That’s my placeholder for label keys. So idea is like this, when language switching event happens i will run through my labels, and assign new values to their content based on the key i find. So markup we did, now we need actual implementation. Which quite simple as well:

var app = {
   events: {
    CHANGE_LANGUAGE: 'jQueryChangeLanguageEvent'
   },

   Messages:  {
    OK: 'OK',
    CANCEL: 'Cancel',
    YES: 'Yes',
    NO: 'No',
    NAME: 'Name'
   },
   Messages_gr: {
    OK: "εντάξει",
    CANCEL: "ακυρώσει",
    YES: "ναι",
    NO: "οχι",
    NAME:'Όνομα'
   }
  };

  $(function() {
   $('#btnExec').live('click', function() {
    $(document).trigger({
     type: app.events.CHANGE_LANGUAGE,
     language: 'gr'
    });
   });

   $(document).bind(app.events.CHANGE_LANGUAGE, function(e) {
    app.Messages = app["Messages_" + e.language];
    $('*[key]').each(function(ndx) {
     $(this).html(eval('app.' + $(this).attr('key')));
    });
   });
  });

What i’m doing here is this, i defined my application data that contains events names/constants, I defined 2 set of language files Messages and Messages_gr, which in real world application you could load with $.getJSON or something from some URL, instead stuffing it into your main application. If your user workign only with English UI, there is no point to load data for all other languages.

So, we need to listen for CHANGE_LANGUAGE that we defined in app.events.* in order to perform live language switching, once this event happen we going through all elements that have key, you can see in my case it’s TD and A tags, and replace labels with new content based on key specified within context html element.

I’ve also added there btnExec just to perform actual event triggering so you can see whole flow.

In case if you will decide to use file based language files you could wrap it like this:

$(document).bind(app.events.CHANGE_LANGUAGE, function(e) {
 $.getJSON('messages_' + e.language,function(data) {
 app.Messages = data;
 $('*[key]').each(function(ndx) {
 $(this).html(app.Messages[$(this).attr('key')]);
 });
});
});

You can find complete code here: jquery-languageSwitch.htm