Using localStorage to Support Multilingual

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.
1 person has
this question
+1
This topic is no longer open for comments or replies.
  • 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
    localStorage.getItem("varName")
    where 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.
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. sad, anxious, confused, frustrated kidding, amused, unsure, silly happy, confident, thankful, excited indifferent, undecided, unconcerned

  • Hello Hawk,

    You can get the selected value from selectmenu on event value change by calling the following code:
    var val = Appery("mobileselectmenu_10").find(":selected").text();

    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?
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. sad, anxious, confused, frustrated kidding, amused, unsure, silly happy, confident, thankful, excited indifferent, undecided, unconcerned

  • Hawk,

    On "value change" event you need to get the value selected in menu:
    var val = Appery("mobileselectmenu10").find(":selected").text();

    After this you need to call the rest of the code:
    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
    });


    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
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. sad, anxious, confused, frustrated kidding, amused, unsure, silly happy, confident, thankful, excited indifferent, undecided, unconcerned

  • 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:
    var val = Appery("mobileselectmenu10").val();
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. sad, anxious, confused, frustrated kidding, amused, unsure, silly happy, confident, thankful, excited indifferent, undecided, unconcerned

  • 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.
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. sad, anxious, confused, frustrated kidding, amused, unsure, silly happy, confident, thankful, excited indifferent, undecided, unconcerned

  • 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:
    var 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
    });
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. sad, anxious, confused, frustrated kidding, amused, unsure, silly happy, confident, thankful, excited indifferent, undecided, unconcerned

  • Hi,

    Thank you for trying to help me. I have removed all events and added only one event for selectmenu with the script you posted above. Now when I test the app, I am expecting when I change the option from 'English' to 'German' in selectmenu, the caption text (which is originally 'English Language') and the label text (which is originally 'This is a demo'), I expect them to show in German:
    English Language : Deutsch Sprache
    This is a demo: Dies ist Demo

    Unfortunately, that did not happen. Nothing has changed!

    Are the translation.json files correct?

    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" }

    Do I need to change anything in selectmenu properties?
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. sad, anxious, confused, frustrated kidding, amused, unsure, silly happy, confident, thankful, excited indifferent, undecided, unconcerned

  • Hawk,

    Could you please clarify, have you made all the necessary markings as in the tutorial:
    http://devcenter.appery.io/tutorials/... ?
    Also please specify, are there any errors in console?
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. sad, anxious, confused, frustrated kidding, amused, unsure, silly happy, confident, thankful, excited indifferent, undecided, unconcerned

  • Hi,

    Yes, for header component, the marking is identical to the one in the tutorial. The label component, the marking is : (data-i18n : lable)

    The console does not show any error/warning at all.

    Are the translation.json files correct (given that the selectmenu options values are en-EN & de-DE)?

    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" }

    Do I need to change anything in selectmenu properties?
    What is the significance of the identifier 't' in '$.i18n.init(option, function(t)'?
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. sad, anxious, confused, frustrated kidding, amused, unsure, silly happy, confident, thankful, excited indifferent, undecided, unconcerned

  • Hawk,

    Could you please provide us with public link to your project, we'll test: http://devcenter.appery.io/documentat...
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. sad, anxious, confused, frustrated kidding, amused, unsure, silly happy, confident, thankful, excited indifferent, undecided, unconcerned

  • Hi Evgene,

    This is the project link

    https://appery.io/app/projects/45516c...

    Not sure if this is what you asked for. In order to share the project I need your email, right?

    Your help is deeply appreciated
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. sad, anxious, confused, frustrated kidding, amused, unsure, silly happy, confident, thankful, excited indifferent, undecided, unconcerned

  • Hawk,

    You have the wrong name for the folder with json files, it should be called locales (you have locals). And in the code it should be
    var option = {lng: val, resGetPath: 'locales/lng/ns.json', fallbackLng: 'en-US'};

    You have inaccuracies in resGetPath.
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. sad, anxious, confused, frustrated kidding, amused, unsure, silly happy, confident, thankful, excited indifferent, undecided, unconcerned

  • Hi Evgene,

    I have renamed the folder to 'locales' and the the code to:

    var val = Appery("typeList").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
    });

    It is still not showing the translation in German when I change the option in selectmenu from English to German. The console does not show any error/warning either!
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. sad, anxious, confused, frustrated kidding, amused, unsure, silly happy, confident, thankful, excited indifferent, undecided, unconcerned

  • Hawk,

    Sorry, there was a typo in my last reply. You should use understreck, like here:
    http://devcenter.appery.io/tutorials/...
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. sad, anxious, confused, frustrated kidding, amused, unsure, silly happy, confident, thankful, excited indifferent, undecided, unconcerned

  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. sad, anxious, confused, frustrated kidding, amused, unsure, silly happy, confident, thankful, excited indifferent, undecided, unconcerned