Search code examples
firefox-os

innerhtml value does not change when data-l10n-id attribute is changed

I would like to change the label of a button on click from "start" to "restart". My app will be available in several languages and I am using the L10n.js library for that. The label of the button can have 2 values ("Start" and "Restart")) defined as followed in the app.properties:

    start = Start
    restart = Restart
    text = this is some text
    another-text = this is another text

The button is defined like this (using buttons building block):

    <body>
        <p id="sometext" data-l10n-id="text"></p>
        <section data-type="sidebar" role="region" class="skin-dark">
                <section style="margin-bottom: 30px">
                    <button id="startbutton" class = "recommend" data-l10n-id="start">Start</button>
                </section>
            </div>
        </section>

  </body>

Once the page is loaded the correct button (and paragraph) value is displayed. The data-l10n-id attribute and corresponding value should change upon click:

    document.getElementById("startbutton").addEventListener("click", function( event ) {
        this.setAttribute("data-l10n-id", "restart");
        document.getElementById("sometext").setAttribute("data-l10n-id", "another-text");
    });

Looking at DOM the attribute has changed but not the value it should display:

    <p id="sometext" data-l10n-id="another-text">this is some text</p>
    <section data-type="sidebar" role="region" class="skin-dark">
        <section style="margin-bottom: 30px">
            <button id="startbutton" class="recommend" data-l10n-id="restart">Start</button>
        </section>          
    </section>

Is there something I am doing wrong? Any comment is welcome! Thank you.

Solution

  • Here is a demo app for the usage of l10n.js: https://github.com/tuxor1337/fxos-l10n-demo

    Note that the <head> part of the HTML document contains information about the available locales:

    <link rel="localization" href="locales/testing.{locale}.properties" />
<meta name="availableLanguages" content="en-US" />

    Furthermore we include not only l10n.js, but also a shim for JavaScript's Promise since that's required by l10n.js, but it's not part of Firefox OS 1.3:

    <script src="es6-promise.js" defer></script>
<script src="l10n.js" defer></script>
<script src="app.js" defer></script>

    I successfully tested the code with the Firefox OS emulators for versions 1.3 and 2.0. Note that there are slightly different implementations of l10n.js around. I used Mozilla's implementation used in gaia: https://github.com/mozilla-b2g/gaia/blob/master/shared/js/l10n.js