Forum | Appery.io

Hi,

I've created multi-lingual page and when I choose the language using (selectMenu) all items are updated to the selected language (e.g. Chinese) except checkBox!. Is there any special treatment for this items? I only added one record to (more properties) option (see below) and checked the spelling and it's all correct.

Hawk,

For the checkbox you should do everything as it is shown in the tutorial, except for the data parameter-i18n-target (http://devcenter.appery.io/tutorials/...)
instead
".ui-title"
use
"label"

Hi Evgene,

I've done as you advised. Unfortunately it did not work:

You help is highly appreciated.

Hi Hawk,

Do you run translation code on "page show" event?

Please give us your app public link and describe steps to reproduce it.

Regards.

Hi Yurri, the code runs on selectMenu/Change value event. Here is the public link: http://appery.io/app/mobile-frame?src...

Regards,

Hi Hawk,

If on this change event you invoke some list/query service that is populate checkbox you need to invoke translate code on "success" event of this "list/query" service.

Also please provide us steps to reproduce this problem. (with login and password to login in your app)

Regards.

Hi Yurri,

No events on selectMenu except run java script to invoke the language function. In order to reproduce the issue, first page (login page), just choose different language from langauge menue (e.g. chinese) and you'll find all items have been translated except (remember me) checkbox. The username and password are haytham/star1234. I do not think you'll need them as I only translated login page for testing at this stage though.

Thanks for help!

Hawk,

I've checked your app, and have to say - that is a limitation of Appery.io checkbox component.

But here is a solution for you:

1 Put html component on the page.

2 Set type for this component as "div" http://prntscr.com/4j6ium/direct

3 Click "more properties" for this html component and set attribute as in screen shot: http://prntscr.com/4j6j5u/direct

pre

data-i18n = yourTranslationId
data-i18n-target = label.ui-btn

/pre

4 Put your checkbox inside this html component.

That's all.

Regards.

Thanks Yurii, it works

Your solution seems a lot more complicated than it should be. The following works perfectly for me.

On the page load containing the checkbox run the following JavaScript:

// LOAD LANGUAGE FILE
$(document).i18n();
// SET CHECK BOX LABEL
Appery("checkbox_name").attr("data-i18n","language_translation");
Appery("checkbox_name").attr("data-i18n-target","label.ui-btn");

Leave the language attributes under more properties blank. You don't need them as you will be calling the translations when the page gets loaded.

It seems pointless to actually put the checkbox inside of the html container when you can simply set the label when the page loads; Especially if you are going to be getting and setting local storage variables from the checkbox.

Hopefully this will help some people out.