Like most people, I use a bunch of jquery plugins on my website. From Twitter bootstrap to jquery ui datepicker and so on.

But I need my website to be multilingual, so I created a general language file called english.js , and in that file I want to declare some of the defaults from plugins as well as other language variables.

The problem is that all these plugins have varying structures to declare defaults. I saw a couple of questions already ( jquery - setting plugin defaults?, Globally defining jQuery plugin parameters , jQuery plugin defaults , ...). But they are not clear.

STRUCTURE 1

$.fn.ajaxStatus = function (params)
{
    var settings = $.extend(
            {
                defaultLoadingText :"Loading...",
                defaultSavingText  :"Saving...",
                defaultDoneText    :"Done",
                defaultRedirectText:"Redirecting...",
                defaultErrorText   :"Oops! Our bad, something wrong.";
            },$.fn.ajaxStatus.defaults,
            params),
});

STRUCTURE 2

   jQuery.fn.extend({
        shrinker:function (options) {
            var opts = $.extend({
                "moreText":"Read more", 
                "lessText":"hide",
            }, $.fn.shrinker.defaults, options);
   });

THE QUESTION

Without modifying the plugin, is it possible to assign some defaults for the function that will be used every time I use the plugin? How can I define the language defaults in an external file?

Right now, I have this in my language file, but it feels wrong, is this how you do it?

if ($.fn.ajaxStatus !== undefined) {
    $.fn.ajaxStatus.defaults =
    {
        defaultLoadingText :"Loading2...",
        defaultSavingText  :"Saving2...",
        defaultDoneText    :"Done2",
        defaultRedirectText:"Redirecting2...",
        defaultErrorText   :"Oops! Our bad, something wrong"
    };
}

Thanks in advance for you help.

Like most people, I use a bunch of jquery plugins on my website. From Twitter bootstrap to jquery ui datepicker and so on.

But I need my website to be multilingual, so I created a general language file called english.js , and in that file I want to declare some of the defaults from plugins as well as other language variables.

The problem is that all these plugins have varying structures to declare defaults. I saw a couple of questions already ( jquery - setting plugin defaults?, Globally defining jQuery plugin parameters , jQuery plugin defaults , ...). But they are not clear.

STRUCTURE 1

$.fn.ajaxStatus = function (params)
{
    var settings = $.extend(
            {
                defaultLoadingText :"Loading...",
                defaultSavingText  :"Saving...",
                defaultDoneText    :"Done",
                defaultRedirectText:"Redirecting...",
                defaultErrorText   :"Oops! Our bad, something wrong.";
            },$.fn.ajaxStatus.defaults,
            params),
});

STRUCTURE 2

   jQuery.fn.extend({
        shrinker:function (options) {
            var opts = $.extend({
                "moreText":"Read more", 
                "lessText":"hide",
            }, $.fn.shrinker.defaults, options);
   });

THE QUESTION

Without modifying the plugin, is it possible to assign some defaults for the function that will be used every time I use the plugin? How can I define the language defaults in an external file?

Right now, I have this in my language file, but it feels wrong, is this how you do it?

if ($.fn.ajaxStatus !== undefined) {
    $.fn.ajaxStatus.defaults =
    {
        defaultLoadingText :"Loading2...",
        defaultSavingText  :"Saving2...",
        defaultDoneText    :"Done2",
        defaultRedirectText:"Redirecting2...",
        defaultErrorText   :"Oops! Our bad, something wrong"
    };
}

Thanks in advance for you help.

• javascript
• jquery
• internationalization

3 Answers 3

I could see doing it in one object, like this:

var en = {
    defaultLoadingText: "Loading...",
    defaultSavingText: "Saving...",
    defaultDoneText: "Done",
    defaultRedirectText: "Redirecting...",
    defaultErrorText: "Oops! Our bad, something wrong.";
    moreText: "Read more", 
    lessText: "hide"
};

Assuming there's no overlap in option names between plugins, you could just start your plugins with:

$('').ajaxStatus(en);
$('').shrinker(en);

Most plugins take in an options object and ignore the extra properties. If you have some other options you want to pass to a particular plugin, you just use $.extend():

$('').ajaxStatus($.extend({}, { success: function () {} }, en));

If you really wanted to keep the plugin options separate, just create another level:

var en = {
    ajaxStatus: {
        defaultLoadingText: "Loading...",
        defaultSavingText: "Saving...",
        defaultDoneText: "Done",
        defaultRedirectText: "Redirecting...",
        defaultErrorText: "Oops! Our bad, something wrong.";
    },
    shrinker: {
        moreText: "Read more", 
        lessText: "hide"
    }
};

Then:

$('').ajaxStatus(en.ajaxStatus);
$('').shrinker(en.shrinker);

Finally, you could get fancy and make it easier to get different languages by storing them all in one multi-layered object:

var localizedOptions = {
    'en-US': {
        ajaxStatus: {
            defaultLoadingText: "Loading...",
            defaultSavingText: "Saving...",
            defaultDoneText: "Done",
            defaultRedirectText: "Redirecting...",
            defaultErrorText: "Oops! Our bad, something wrong.";
        },
        shrinker: {
            moreText: "Read more", 
            lessText: "hide"
        }
    },
    'es-ES': {
        ajaxStatus: {
            defaultLoadingText: "Cargar...",
            defaultSavingText: "Guardar...",
            defaultDoneText: "Terminado",
            defaultRedirectText: "Redirigir...",
            defaultErrorText: "¡Ay! Nuestra algo malo, malo.";
        },
        shrinker: {
            moreText: "Leer más", 
            lessText: "esconder"
        }
    } // ... etc.
};

And

$('').ajaxStatus(localizedOptions[navigator.language || navigator.userLanguage].ajaxStatus);

I must admit I haven't used something like this myself, because I usually get language files in the form of a resource file. In that case, I'll just output a single collection of key/value pairs via server-side logic and manually set the appropriate plugin properties.

In ASP.NET MVC:

<script>
var Resources = {};
@foreach (var kvp in ViewBag.Resources) {
Resources['@kvp.Key'] = "@kvp.Value";
}
</script>

This would output a different set, depending on the page I'm on.

I have done somehow similar to this. But I am not giving the full implementation.

Here is how to do it.

Define your plugins params for language like this:

var options = {
    lang: "np" //your default language
};

Set up your language objects like this

var lang = {
    "en": {
        "var1" : "This is variable one"
    },
    "np": {
        "var1": "यो एउटा भेरियबल हो ।"  //Different text based on language initials
    }
};

Then you can simply create a function to read the value like this

function showVar1() {
    alert(lang[options.lang].var1);
}

[Demo]_{Its not a plugin based.}

I think the way I'd do it is very similar to STRUCTURE 1. I think it's fine to override the plugins defaults like you're suggesting.

I'd build my plugin like this:

(function($){

    $.fn.pluginName = function (options) {
        /**
         * Here I'm extending an empty object to include the options
         * passed to the plugin, with the default options.
         */
        var opts = $.extend({}, $.fn.pluginName.defaults, options);

        // body of plugin here
    });

    // default values for plugin
    $.fn.pluginName.defaults = {
        defaultLoadingText :"Loading...",
        defaultSavingText  :"Saving...",
        defaultDoneText    :"Done",
        defaultRedirectText:"Redirecting...",
        defaultErrorText   :"Oops! Our bad, something wrong."
    };

})(jQuery);

Then in english.js you could redefine the $.fn.plugin.defaults object:

if ($.fn.pluginName) {
    // override the default values in the specified language
    $.fn.pluginName.defaults = {
        defaultLoadingText :"Loading...",
        defaultSavingText  :"Saving...",
        defaultDoneText    :"Done",
        defaultRedirectText:"Redirecting...",
        defaultErrorText   :"Oops! Our bad, something wrong."
    };
}

This would override the plugins default defaults. If that makes sense.