How can I translate strings dynamically?

[TechOverflow]

I'm having trouble translating strings dynamically. It seems that this is because the translation is loaded after the rest of the code.

main.js (script linked in head)

function _T(key) {
    'use strict';
    var i18n = $.i18n();
    $.i18n().load('../assets/lang/ui_' + $.i18n().locale + '.json', $.i18n().locale).done(function() {
        console.log(key + ' : ' + $.i18n(key));
        return $.i18n(key);
    });
}

page.php

<script type="text/javascript">
    $(document).ready(function () {
        var formats = { portrait : _T('text-portrait'), landscape : _T('text-landscape'), square : _T('text-square') }
        $.each(formats, function (key, format) {
            console.log('appending '+key)
            $('#format').append($('<option>', { 
                value: key,
                text : format
            }))
        })
    })
</script>

console output:

[Log] appending portrait
[Log] appending landscape
[Log] appending square
[Log] text-portrait : Portrait
[Log] text-square : Square
[Log] text-landscape : Landscape

As you can see, the translation happens after the each loop.
What is the correct way to preload the translation to ensure it being available when document is ready?

[TechOverflow]

Brain fart, the load() needs to be outside of the function. Hope this helps someone else.

var i18n = $.i18n();
$.i18n().load('../assets/lang/ui_' + $.i18n().locale + '.json', $.i18n().locale);

function _T(key) {
    console.log(key + ' : ' + $.i18n(key));
    return $.i18n(key);
}

[TechOverflow]

I am still sometimes experiencing that the json file isn't loaded in time for the translations to be done.
Is there a way to ensure that the (very small) files are loaded before executing the rest of the script?

[Abhinob-Bora]

i think modify the _T function, you can make use of a deferred object (e.g., $.Deferred()) to handle the asynchronous loading of translations :

function _T(key) {
'use strict';

var deferred = $.Deferred(); // Create a deferred object

// Load translations asynchronously
$.i18n().load('../assets/lang/ui_' + $.i18n().locale + '.json', $.i18n().locale).done(function () {
    console.log(key + ' : ' + $.i18n(key));
    deferred.resolve($.i18n(key)); // Resolve the deferred object with the translation
});

return deferred.promise(); // Return the promise from the deferred object

}

Now, the _T function returns a promise. This allows you to use the .done() method when calling _T to handle the asynchronous nature of loading translations:

$(document).ready(function () {
// Define the formats without directly calling _T
var formats = { portrait: 'text-portrait', landscape: 'text-landscape', square: 'text-square' };

// Load translations asynchronously
var loadOperation = $.i18n().load('../assets/lang/ui_' + $.i18n().locale + '.json', $.i18n().locale);

// Execute after translations are loaded
$.when(loadOperation).done(function () {
    // Populate #format with translated options
    $.each(formats, function (key, translationKey) {
        console.log('appending ' + key);

        // Use _T with .done() to get the translated value
        _T(translationKey).done(function (translatedValue) {
            $('#format').append($('<option>', {
                value: key,
                text: translatedValue
            }));
        });
    });
});

});

[aryan1210718]

the $i18n().load function has not finished loading transaltion before the rest of the script executed.the transaltion are being fetched after the loop $.each is already running...instead

in mainJS:

function T(key) {
'use strict';
var i18n = $.i18n();
return $.i18n().load('../assets/lang/ui' + $.i18n().locale + '.json', $.i18n().locale);
}

return the load first in _T then do the .done fn in document ready.....

in page.php

<script type="text/javascript"> $(document).ready(function () { _T().done(function() { var formats = { portrait : _T('text-portrait'), landscape : _T('text-landscape'), square : _T('text-square') } $.each(formats, function (key, format) { console.log('appending '+key) $('#format').append($('', { value: key, text : format })) })) }) }) </script>

TRY THIS! HOPE THIS FINDS YOU USEFUL

[Amisha-1580]

fixed #274

solution:

1. The issue you're facing happens because the translation file (ui_.json) is loaded asynchronously using .done(), so it hasn't been loaded and applied when your $(document).ready() function runs. As a result, when you try to call _T() to get the translated text, the translations aren't available yet.

2. To solve this, you should load the translations before initializing your page's content. You can achieve this by using a Promise to ensure that the translations are fully loaded before proceeding with the rest of the code

example of code:
` // main.js
function T(key) {
'use strict';
var i18n = $.i18n();
// Return a Promise to handle the async loading
return $.i18n().load('../assets/lang/ui' + $.i18n().locale + '.json', $.i18n().locale);
}

// page.php

<script type="text/javascript"> $(document).ready(function () { // Load the translations first _T().done(function() { var formats = { portrait : $.i18n('text-portrait'), landscape : $.i18n('text-landscape'), square : $.i18n('text-square') }; // Now that translations are available, populate the options $.each(formats, function (key, format) { console.log('appending ' + key); $('#format').append($('', { value: key, text : format })); }); }); }); </script>

`
i hope these may be helpful for you