How to dynamically load data for jquery-localize

Question

I am using jquery-localize plugin for translating my page. I wonder is it possible to load dynamically created JSON data (sent from server) instead of using pre-made files. It would be a lot easier to maintain since my web and desktop application share about 95% of text (so I am using same .resx file for both).

So, i loaded translations using ajax:

$.ajax({
        type: "POST",
        url: "Helper.aspx/LocalizePage",
        data: '{"lang":"' + lang + '"}',
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (msg) {
            if (msg.d != "error") {
                console.log(msg.d);
                translationData = msg.d;
                var translationTable = jQuery.parseJSON(msg.d);
            }
        },
        error: function (response) {
            var responseTextObject = jQuery.parseJSON(response.responseText);
            console.log(responseTextObject);
        }
    });

and i have parsed (translationTable) and unparsed (translationData) text. Unparsed is same as jquery-localize requires. So, how to use this data as source for it?

Answer 1

You can have your ajax/jquery reference a server side page that's written in php/asp or whatever preferred server side language. And then have that page return text in JSON format based on the criteria you pass to the page.

Answer 2

So, here is the solution. Bryant gave me idea what to do (load translation file via separate page) but it requires some modifications. First, we need to modify jquery-localize.js file. In localize function, alter switch so it looks like this:

switch (level) {
        case 1:
            intermediateLangData = {};
            if (options.loadBase) {
                //file = pkg + ("." + fileExtension);
                file = pkg;
                return jsonCall(file, pkg, lang, level);
            } else {
                return loadLanguage(pkg, lang, 2);
            }
            break;
        case 2:
            if (lang.length >= 2) {
                //file = "" + pkg + "-" + (lang.substring(0, 2)) + "." + fileExtension;
                file = pkg;
                return jsonCall(file, pkg, lang, level);
            }
            break;
        case 3:
            if (lang.length >= 5) {
                //file = "" + pkg + "-" + (lang.substring(0, 5)) + "." + fileExtension;
                file = pkg;
                return jsonCall(file, pkg, lang, level);
            }

Notice commented original lines. We won't do any alterations of "filename" in my case, so be careful if you are doing your implementation (you might need to check requested language).

Other part of job is change how localization is initialized. Instead of standard $("[data-localize]").localize("filename"); we are going to use following line:

$("[data-localize]").localize("Localization.aspx?lang=en-US");

This Localize.aspx is dummy page which has following PageLoad event:

    protected void Page_Load(object sender, EventArgs e)
    {
        string json = "";
        var lang = Request.QueryString["lang"];
        if (lang.Length > 0)
        {
            json = WebHelper.GetAllTranslations(lang);
        }
        else
        {
            json = WebHelper.GetAllTranslations("en-US");
        }

        Response.Clear();
        Response.ContentType = "application/json; charset=utf-8";
        Response.Write(json);
        Response.End();
    }

This WebHelper.GetAllTranslations(lang) returns JSON-formatted string with translations, just like you would have them in single file for regular use.

To sum up - instead of using file with translations, we modified jquery-localize.js so it loads translations directly from string, returned from page. This is simple and bit crude modification but it does it job.

Of course, you can use AJAX call or something else - important part is to modify jquery-localize that it doesn't search for files, but loads translation directly.

I hope this will help someone with similar problem.