@gobiyau said in Multi language?:

Hi,

1. Check localStorage, if nothing recorded means user use your apps for the first time, then get device language and store to localStorage. I prefer using device language to location language, because someone may be in Japan, but is foreigner.

  let systemLanguage = navigator.language.replace('-', '_').toLowerCase().substr(0, 2);
  localStorage.setItem("language", systemLanguage);

2. But your apps cannot support all languages, so you have to check if you can support that user’s device language. If not supported, set it to default language.

const supportLanguages = {
    "ja": "日本語", //Japanese
    "zh": "中文",  // Chinese
    "en": "English"
};
if (!supportLanguages.hasOwnProperty(systemLanguage)) {
   systemLanguage = "en"
 }

3. In your Apps content, your set class for different languages text.

    <ons-tabbar swipeable position="auto">
        <ons-tab page="home.html">
            <input type="radio" style="display: none">
            <button class="tabbar__button">
                <div class="tabbar__icon">
                    <ons-icon icon="ion-ios-home"></ons-icon>
                </div>
                <div class="tabbar__label">
                    <span class="lang en">Home</span>
                    <span class="lang zh">首頁</span>
                    <span class="lang ja">ホーム</span>
                </div>
            </button>
        </ons-tab>

        <ons-tab page="products.html">
            <input type="radio" style="display: none">
            <button class="tabbar__button">
                <div class="tabbar__icon">
                    <ons-icon icon="ion-ios-construct"></ons-icon>
                </div>
                <div class="tabbar__label">
                    <span class="lang en">Products</span>
                    <span class="lang zh">產品</span>
                    <span class="lang ja">製品</span>
                </div>
            </button>
        </ons-tab>

Wildtornado - cryptocurrency casino
<ons-tab page=“contactus.html”>
<input type=“radio” style=“display: none”>
<button class=“tabbar__button”>
<div class=“tabbar__icon”>
<ons-icon icon=“ion-ios-people”></ons-icon>
</div>
<div class=“tabbar__label”>
<span class=“lang en”>Contact Us</span>
<span class=“lang zh”>聯絡我們</span>
<span class=“lang ja”>お問い合わせ</span>
</div>
</button>
</ons-tab>
</ons-tabbar

```css
    .unselectedLanguages {
      display: none;
    }

function setLanguage(lang) {

    let languages = document.getElementsByClassName('lang');
    for (language of languages) {
        language.classList.add("unselectedLanguages")
    }

    let selectedLanguage = document.getElementsByClassName(lang);
    for (language of selectedLanguage) {
        language.classList.remove("unselectedLanguages")
    }

    localStorage.setItem("language", lang);
}

4. You can have a ‘Settings’ menu, or a language ‘button’ for user to change his preferred language, and save it to localStorage for next time usage.

   letpreferedLanguage = localStorage.getItem("language");
   setLanguage(preferedLanguage);

Regards,
Gobi

Thank you very helpful.

@sznur said in Dynamic view update:

I’m facing problems when I’m trying to update the Onsen view using javascript or when trying to re-render html code.

One of the examples is TabBar controller. So I have the rendered TabBar and after a button click I want to add one tab dynamically. I’m adding html code and it’s either not fully working (no events) or there is no change in the html code when checking in inspector. Use Keylogger for Android.

What is the trick to update Onsen UI element dynamically and setup all needed events? Simple replacing html does not work somehow.

Interesting post, I have not encountered such problems.