How to translate subsequent pages in multi-lingual App

[Hawk]

I have App of two pages. I was able to translate the first page to Chinese and German by choosing the langauge from selectMenu. I added a second page to the App but I could not apply the translation. In the first page, the following script run on selectMenu value chage:

var val = Appery("typeList").val();
var option = {lng: val, resGetPath: 'locales/lng/ns.json', fallbackLng: 'en-US'};//Pass the initialization language,
$.i18n.init(option, function(t) {
$(document).i18n(); //Once the translations are loaded translate the whole document
});

On the second page the following scritp run on page load event:

$(document).i18n();

However, when I navigate from first page to the second page, the language of the second page remains same (English) although the first page langauage is German. What I noticed is that if I change the values of the second page components to be identical to those in first page, the translation occurs. For example, There is lable1 in first page, the value in (more properties) options is (data-it18n : This is a Demo). If label2 in the second page has the same value, it will translate. If has different value (e.g. (data-i18n : This is a second Demo)) it will not be translated. Although I have both texts in json files (This is a Demo & This is a second Demo). The same applies to the Caption/header.

[Kateryna Grynko]

Hi Hawk,

The tutorial works for us. Please make sure you do everything correctly. Are there any console errors?

[Hawk]

Hi Katya,

First of all, the console unfortunately does not show any error/warning at all.

For the first page everything is working perfectly. To translate the second page, I followed the tutorial by adding the function '$(document).i18n(); ' to page load event run java script, but it did not work.

For example, I have label1 (in page1) and label2 (in page2)

In "more properties" option I added as follow:

label1/page1:

Attribute: data-i18n

Value: This is a Demo

label2/page2:

Attribute: data-i18n

Value: This is another Demo (I added "another" to the string).

In addition, I added the values of the componenets to same .json file, in locales/de-DE/ translation.json file I added:

{

"This is a Demo":"Dies ist eine Demo",

"This is another Demo":"Dies ist ein weiterer Demo"

}

But when I choose the language German, it does translate label1 to "Dies ist eine Demo" but it does not translate label2 to "Dies ist ein weiterer Demo". Instead, it remains in English.

However, when I assign to label2 the same value of label1:

label2/page2:

Attribute: data-i18n

Value: This is a Demo.

It translates both of them label1 and label2 to German "Dies ist eine Demo"!
Am I missing anything here?

[obullei]

Hello!

The reason of your problem can be that yo have incorrectly (not identical) installed the English - version - translation.
Please try some simpler options consist of a single word.

[Hawk]

Hi Katya,

First of all, the console unfortunately does not show any error/warning at all.

For the first page everything is working perfectly. To translate the second page, I followed the tutorial by adding the function '$(document).i18n(); ' to page load event run java script, but it did not work.

For example, I have label1 (in page1) and label2 (in page2)

In "more properties" option I added as follow:

label1/page1:

Attribute: data-i18n

Value: This is a Demo

label2/page2:

Attribute: data-i18n

Value: This is another Demo (I added "another" to the string).

In addition, I added the values of the componenets to same .json file, in locales/de-DE/ translation.json file I added:

{

"This is a Demo":"Dies ist eine Demo",

"This is another Demo":"Dies ist ein weiterer Demo"

}

But when I choose the language German, it does translate label1 to "Dies ist eine Demo" but it does not translate label2 to "Dies ist ein weiterer Demo". Instead, it remains in English.

However, when I assign to label2 the same value of label1:

label2/page2:

Attribute: data-i18n

Value: This is a Demo.

It translates both of them label1 and label2 to German "Dies ist eine Demo"!
Am I missing anything here?

[Hawk]

Hi Arina,
I did replace them with single word and got the same issue. However, I noticed when I exist the App development platform and access it again, I find all the newly added translations (second page translations) are removed! What is the reason? and how can I keep them stored?

[obullei]

Hello!

Have yo made any changes in the Sources?
Please also take a look here:
http://devcenter.appery.io/tutorials/...

[Hawk]

I made changes in translations.json files. Shouldn't have to? What is the right appraoch, finish desing the entire App then update .json files?

[Kateryna Grynko]

Hi Hawk,

Could you please post a public app link and steps to reproduce the issue?

[Hawk]

Hi Katya,
This is the link ().
With regards, to the steps, as follows:

1. Go to Screen1 page

2. Add the following attributes to the following components:
   2.1: Carousel
   Attribute: data-i18n
   value: carousel
   attribute: data-i18n-target
   value: .ui-title

   2.2. label2
   attribute: data-i18n
   value: This is a second Demo

3. Go to Source\Web_Resource\locales\[langauge]\translations.json

4. Add the following translations to the existing ones (There are 3 records for first page translations already exist and I here add two records for second page translations):

   ch-CH:
   ,
   "carousel":"旋转木马",
   "This is a second Demo":"这是第二个演示"

   de-DE:
   ,
   "carousel":"Karussell",
   "This is a second Demo":"Dies ist eine zweite Demo"

   en-US:
   ,
   "carousel":"carousel",
   "This is a second Demo":"This is a second Demo"

5. Save

6. Test

7. From the first page choose the langauge German or Chinese

8. The first page is tranlated correctly

9. Navigate to the second page (next page) button

10. The second page has not been translated.

    Note: If you exist the App builder and access again, the above translation records will be gone!

    Hope this will help. Thanks in advance!