Forum | Appery.io

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.

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

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.

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/...

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?

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.

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

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

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.

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