Using localStorage to Support Multilingual

Thu Aug 07, 2014 11:15 am

I just started learning with this amazing appery.io. One of the first challenges I am facing now is with the first page that contains a menu of supported languages.

I followed this great tutorial (http://devcenter.appery.io/tutorials/...). However, I think this tutorial teaches how to update the app langauge based on the device/browser language.

What I am looking for is that the user can choose the language of the app apart from the device language. A button once clicked shows a list of supported languages. To my knowledge, I can save the language into localStorage and retrieve from localStorage instead using

navigator.language || navigator.userLanguage;

However, I am not sure how to store into localStorage and retrieve it from there(I am quite begginer here). I am using the example in the tutorial mentioned above and I wish I can improve it to just use localStorage. I would deeply appreciate any help, or if there is good tutorial in this regard.

Thu Aug 07, 2014 11:56 am

Hello!

1) To save into localStorage you can on click on language name add Set local storage variable action

2) To use this value in JS use prelocalStorage.getItem("varName")/prewhere varName - variable name

Fri Aug 08, 2014 4:29 am

My page contains two componenets:

Caption/header: has the text "header"
Select menu: has two options (English, German).

I have done the following:
I created two translation.json files for both langauges and inserted the following :

de-DE: { "header":"Deutsch"}
en-EN: { "header":"English" }

I have created four events for selectMenu component as follow:
a. selectMenu click set local storage variable:
variable name: language
value: var language = Appery("mobileselectmenu_10").find(":selected").text();

b. selectMenu click set local storage variable:
variable name: language
value: var language = Appery("mobileselectmenu_10").find(":selected").text();

c. selectMenu change value run java script:
localStorage.getItem("language");
var option = {lng: language, resGetPath: 'locales/_lng/ns.json', fallbackLng: 'en-US'}; //Pass the initialization language, //set the translation files path and fallback language $.i18n.init(option, function(t) { $(document).i18n(); //Once the translations are loaded translate the whole document });

d. selectMenu change value run java script:
localStorage.getItem("language");
var option = {lng: language, resGetPath: 'locales/_lng/ns.json', fallbackLng: 'en-US'}; //Pass the initialization language, //set the translation files path and fallback language $.i18n.init(option, function(t) { $(document).i18n(); //Once the translations are loaded translate the whole document });
When I test the App, I get the following error in the console:

Uncaught Error: Syntax error, unrecognized expression: unsupported pseudo: German jquery-1.9.1.js:4421 Sizzle.error jquery-1.9.1.js:4421 Sizzle.selectors.filter.PSEUDO jquery-1.9.1.js:4776 matcherFromTokens jquery-1.9.1.js:5294 Sizzle.compile jquery-1.9.1.js:5435 select jquery-1.9.1.js:5513 Sizzle jquery-1.9.1.js:3998 $.find jquery.mobile-1.4.2.js:220 jQuery.fn.extend.find jquery-1.9.1.js:5576 $.off.on.change startScreen.js:138 jQuery.event.dispatch jquery-1.9.1.js:3074 elemData.handle jquery-1.9.1.js:2750 jQuery.event.trigger jquery-1.9.1.js:2986 (anonymous function) jquery-1.9.1.js:3677 jQuery.extend.each jquery-1.9.1.js:648 jQuery.fn.jQuery.each jquery-1.9.1.js:270 jQuery.fn.extend.trigger jquery-1.9.1.js:3676 (anonymous function) jquery.mobile-1.4.2.js:11295 jQuery.event.dispatch jquery-1.9.1.js:3074 elemData.handle

I know I might be missing something so trivial, but my knowledge in App development is faily limited. I deeply appreciate your help.

Fri Aug 08, 2014 2:19 pm

Hello Hawk,

You can get the selected value from selectmenu on event value change by calling the following code:
prevar val = Appery("mobileselectmenu_10").find(":selected").text();/pre
where mobileselectmenu_10 is the name of the component selectmenu.
The resulting value you should pass in this script instead browserLanguage: http://devcenter.appery.io/tutorials/...

Mon Aug 11, 2014 3:49 am

Ok, I got the first part and replaced the script with the one you posted for selectmenu. However, I am afraid I did not get the second part. For the start screen, I added the script:

var val2 = localStorage.getItem("val") //val is from the script above (select meun)
var option = {lng: val, resGetPath: 'locales/lng/ns.json', fallbackLng: 'en-US'}; //Pass the initialization language,
//set the translation files path and fallback language
$.i18n.init(option, function(t) {
$(document).i18n(); //Once the translations are loaded translate the whole document
});

1) Where should I save into localStorage you by click on language name and add Set local storage variable action ?
2) Is using the line localStorage.getItem("val") correct?

Mon Aug 11, 2014 5:43 am

Hawk,

On "value change" event you need to get the value selected in menu:
prevar val = Appery("mobileselectmenu10").find(":selected").text();/pre
After this you need to call the rest of the code:
prevar option = {lng: val, resGetPath: 'locales/_lng/ns.json', fallbackLng: 'en-US'}; //Pass the initialization language,
//set the translation files path and fallback language
$.i18n.init(option, function(t) {
$(document).i18n(); //Once the translations are loaded translate the whole document
});/pre

I.e. after each language change in selectmenu i18 next plugin will be called.

Mon Aug 11, 2014 8:30 am

Please bear with me, this is my first App page.
I have created four events for selectMenu as follow:

1) selectMenu click set local storage variable:

variable name: language
value: var language = Appery("mobileselectmenu_10").find(":selected").text();

2) selectMenu click set local storage variable:
variable name: language
value: var language = Appery("mobileselectmenu_10").find(":selected").text();

3) selectMenu change value run java script:

localStorage.getItem("language");
var option = {lng: language, resGetPath: 'locales/_lng/ns.json', fallbackLng: 'en-US'}; //Pass the initialization language,
//set the translation files path and fallback language
$.i18n.init(option, function(t) {
$(document).i18n(); //Once the translations are loaded translate the whole document
});

4) selectMenu change value run java script:

localStorage.getItem("language");
var option = {lng: language, resGetPath: 'locales/_lng/ns.json', fallbackLng: 'en-US'}; //Pass the initialization language,
//set the translation files path and fallback language
$.i18n.init(option, function(t) {
$(document).i18n(); //Once the translations are loaded translate the whole document
});

When I test the App, I get the following error in the console:

Uncaught Error: Syntax error, unrecognized expression: unsupported pseudo: German jquery-1.9.1.js:4421
Sizzle.error jquery-1.9.1.js:4421
Sizzle.selectors.filter.PSEUDO jquery-1.9.1.js:4776
matcherFromTokens jquery-1.9.1.js:5294
Sizzle.compile jquery-1.9.1.js:5435
select jquery-1.9.1.js:5513
Sizzle jquery-1.9.1.js:3998
$.find jquery.mobile-1.4.2.js:220
jQuery.fn.extend.find jquery-1.9.1.js:5576
$.off.on.change startScreen.js:138
jQuery.event.dispatch jquery-1.9.1.js:3074
elemData.handle jquery-1.9.1.js:2750
jQuery.event.trigger jquery-1.9.1.js:2986
(anonymous function) jquery-1.9.1.js:3677
jQuery.extend.each jquery-1.9.1.js:648
jQuery.fn.jQuery.each jquery-1.9.1.js:270
jQuery.fn.extend.trigger jquery-1.9.1.js:3676
(anonymous function) jquery.mobile-1.4.2.js:11295
jQuery.event.dispatch jquery-1.9.1.js:3074
elemData.handle

Mon Aug 11, 2014 2:05 pm

Hawk,

In this case, you need menu to display options de-DE and en-EN. Or if it was used as value for selectmenu items that you should use this code:
prevar val = Appery("mobileselectmenu10").val();/pre

Tue Aug 12, 2014 5:50 am

Hi,

I have added a label, and updated translation.json:
en-EN: { "header":"English Language",
"This is a Demo":"This is a Demo"}

de-DE: { "header":"Deutsch Sprache",
"This is a Demo":"Dies ist Demo" }

where "header" is the default text shown on the caption, and "This is a Demo" is the default text shown on the label.

In selectMenu component, I have two options (English, German). I have created 4 events for this components as follow:

1) selectMenu click set local storage variable:

variable name: language
value: var language = Appery("mobileselectmenu_10").find(":selected").text();

2) selectMenu click set local storage variable:
variable name: language
value: var language = Appery("mobileselectmenu_10").find(":selected").text();

3) selectMenu change value run java script:

localStorage.getItem("language");
var option = {lng: language, resGetPath: 'locales/_lng/ns.json', fallbackLng: 'en-US'}; //Pass the initialization language,
//set the translation files path and fallback language
$.i18n.init(option, function(t) {
$(document).i18n(); //Once the translations are loaded translate the whole document
});

4) selectMenu change value run java script:

localStorage.getItem("language");
var option = {lng: language, resGetPath: 'locales/_lng/ns.json', fallbackLng: 'en-US'}; //Pass the initialization language,
//set the translation files path and fallback language
$.i18n.init(option, function(t) {
$(document).i18n(); //Once the translations are loaded translate the whole document
});

MY QUESTION, which step of the above I make a mistake? How to fix it? Please, provide some details and the logic behind it if possible. I deeply appreciate your help.

Tue Aug 12, 2014 12:48 pm

Hawk,

To be honest, it is not clear what is the difference between steps 3) and 4). But the main idea is that you can do all of this in one event handler change value for selectmenu. On this event you need to call this JavaScript:
prevar val = Appery("mobileselectmenu10").val();
var option = {lng: val, resGetPath: 'locales/_lng/ns.json', fallbackLng: 'en-US'}; //Pass the initialization language,
//set the translation files path and fallback language
$.i18n.init(option, function(t) {
$(document).i18n(); //Once the translations are loaded translate the whole document
});/pre