Multi Lingual resources Implementation & Usage at client side

Multi Lingual resources Implementation & Usage at client side

Declare all the resources in the .js file ==> Let's its name be LanguageResources.js

Note: I have declared resourse for Englisn(under EN), Spanish (under SP),Arabic (under AR) and Chinese (under CH)

1) Declare in as below:

var langResource = {

    EN: {

    1: "office phone",

    2: "location",

    3: "Save",

    4: "Add"

    },

SP: {

    1: "teléfono de la oficina",

    2: "ubicación" ,

    3: "Guardar",

    4: "añadir"

    },

AR: {

    1: "هاتف المكتب",

    2: "موقع",

    3: "حفظ",

    4: "إضافة"

    },

CH : {

    1: "办公电话",

    2: "地点",

    3: "保存",

    4: "添加"

    }

};

2) include hidden field in your html or aspx page è 
< input type="hidden" id="hdnSiteLang"/>

3) In the aspx or html page where you want the resources to be used include this file as below

 <script src="Scripts/LanguageResources.js " type="text/javascript"></script>

 Use hdnSiteLang hidden field for defining your application language, for ex: if you want to display text in Arabic assign it with AR è $("#hdnSiteLang").val("AR");

Note1: by default it will take English, if you want to change then you can assign different language value to this hidden field ex: SP(Spanish),AR(Arabic),CH(Chinese).

Note2: make sure your page also has jQuery file included from jquery.com.

4) Include jQuery function as below

$(document).ready(function () {

            /*LANGUAGE INITIALISATION*/

            if ($.cookies.get('siteLang') != null)

                siteLang = $.cookies.get('siteLang');

            else

                if ($("#hdnSiteLang").val().length > 0)

                    siteLang = $("#hdnSiteLang").val()

                else

                    siteLang = "EN";

            $(".SITELNG").each(function () {

                var cld = $(this).attr('class').split(" ");

                if (cld[0].substring(0, 2) == "H-")

                    $(this).html(langResource[siteLang][cld[0].substring(2)]);

if (cld[0].substring(0, 2) == "L-")                                 $(this).html(langResource[siteLang][cld[0].substring(2)].toLowerCase());

                if (cld[0].substring(0, 2) == "T-")

                    $(this).attr("title", langResource[siteLang][cld[0].substring(2)]);

                if (cld[0].substring(0, 2) == "M-") {

                    if ($("#hdnMode").val() == "true")

           $(this).attr("value", langResource[siteLang][ parseInt(cld[0].substring(2)) + 1]);

                    else

                   $(this).attr("value", langResource[siteLang][cld[0].substring(2)]);

                }

            });

5) Usage: you may surprise the usage is very tricky can be done by just including the class.
syntax:
class=’HTML(H)/TITLE(T)/MODIFYTEXT(M) – RESOURCENUMBER(Integer) SITELNG’

See below:

Example:

1)    <div id="divID" class="H-2 SITELNG"></div>

Note: When loaded this div will be written by text ‘Location’(its declared in array second position) with the default language.

2)  <img id="imgID" class="T-1 SITELNG "></img>

Note:  When loaded this image tag will have title text as ‘Office Phone’(its declared in array 1^st  position) With default language.

3)    <input type="button" class="M-3 SITELNG " id="btnID"/>

This above button text will change depending upon the hidden field value hdnMode, for example I want to set its text as SAVE on existing form and ADD when the form is new.

In this case for the new form I need to set the mode (hdnMode) as ‘true’, based on this the value to this button will be set.

Note: the text to be changed must be declared one after other. (ex: 3 & 4 , Save, Add)

Hope this is helpful to you, write your comments in the box J.