Click here to Skip to main content
13,514,276 members
Click here to Skip to main content
Add your own
alternative version

Tagged as


2 bookmarked
Posted 17 Feb 2012

Localizing jQuery plugins

, 17 Feb 2012
Rate this:
Please Sign up or sign in to vote.
Localizing jQuery plugins

I’ve spent some time to figure out how to localize my jQuery plugins and I’ve just found out a way that works just fine.
Disclaimer: I’m not 100% sure of how namespacing works in jQuery, so this might not be the correct way.

I’m using the meta header accept-language to control which language to use. It allows me to select the language in my backend (using user settings or whatever) instead of just using the languages defined by the browser. An ASP.NET MVC3 header would look like this in the layout:

<meta name="accept-language" 

content="@System.Globalization.CultureInfo.CurrentCulture.Name" />

You should be able to do the same thing in PHP or whatever language you use.

Next thing to do is to add the localization structure to your plug in script file:

(function($) {
    $.yourPluginName = {
        texts: {
            title: 'Please wait, loading..'
        translations: []

    var methods = {
        // your methods here.

    $.fn.yourPluginName = function(method) {

        if (methods[method]) {
            return methods[method].apply(this,, 1));
        } else if (typeof method === 'object' || !method) {
            return methods.init.apply(this, arguments);
        } else {
            $.error('Method ' + method + ' does not exist on jQuery.yourPluginName');



That will make the plug in work if no languages are loaded. The translations will be loaded into the $.yourPluginName.translations array by another script.

We got one thing left to do before we can use the texts in your script. We need to load the correct language. Create another script called jquery.yourpluginnamne.localization.js and load it after:

$(function () {
    $.yourPluginName.translations['sv-SE'] = {
        title: ‘Vänta, laddar..’

    $.yourPluginName.translations['fi-FI'] = {
        title: ‘Yxi yxi, kaxi…’

    var currentLanguage = $("meta[name='accept-language']").attr("content");
    if (typeof $.yourPluginName.translations[currentLanguage] !== ‘undefined’)
        $.yourPluginName.texts = $.yourPluginName.translations[currentLanguage];

That's it!

Use $.yourPluginName.texts.anyTextName in your plug in to use the localized strings.


This article, along with any associated source code and files, is licensed under The GNU Lesser General Public License (LGPLv3)


About the Author

Founder 1TCompany AB
Sweden Sweden
Skip logfiles, try automated error handling!

I'm one of the founders of codeRR, a .NET service which takes care of everything related to exceptions, so that you can focus on writing code.

blog | twitter

You may also be interested in...

Comments and Discussions

-- There are no messages in this forum --
Permalink | Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.180417.1 | Last Updated 17 Feb 2012
Article Copyright 2012 by jgauffin
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid