Localization inside public/*.js

[fgnm]

Hello, I need to use JavaScript in front end to create the UI, so some strings that I need to translate are contained in public/*.js files. However the syntax @(text to translate) seems to have no effects. If I do something like that (using jQuery): $("#myDiv").html('@(my text)'); in the resulting HTML (so in the browser) I got:

<div id="myDiv">
@(my text)
</div>

It's strange because it seems that total does not compile .js files before sending to client. What can I do? I use Total.js v3.0.0

[petersirka]

Hi, translation of static files is not good idea because static files are cached. I mean static files like .js and .css. HTML files can be translated easily via:

https://docs.totaljs.com/latest/en.html#api~global~LOCALIZE

Create a definition file /app/definitions/localization.js:

LOCALIZE('/templates/*.html');
// will localize all files in /app/public/templates/*.html 

Avoid localization in .js and .css files.

[fgnm]

Okay, I understand, and it's a good reason, but I'm in trouble and I hope that you can point me in the right direction. I'm in this situation: through $.post I download a json produced by a controller, now my javascript in frontend should fill a table with info from that POST call, something like that:

$.post('/get_table', {}, function (res) {
        var data = JSON.parse(res);
        var html = "";
        data.table.forEach(function (report) {
             html += "<tr>";
             html += "<td scope='row' data-label='@(Amount)'>" + report.amount + "</td>";
             html += "</tr>";
        });
        $("#table").html(html);
    });

As you can see I need to translate @(Amount). According to you, in which way can I modify this in order to have working translations? More in general, how can I fill a table asyc using ajax and preserve translations in html? I hope I explained myself, thank you so much for your help :)

[petersirka]

Where is $.post() located? It's part of .html file or some .js script? You can use jComponent library www.componentator.com ... and here is good example:

https://github.com/totaljs/spa

---

With jComponent is easy to use localization because templates are part of HTML... That's the point. And here is great localization jComponent called j-Resource -- https://componentator.com/components/j-resource/ look to HTML tab.

<script src="https://cdn.componentator.com/spa.min@16.js"></script>

<div data-bind="mydata__template">
    <script type="text/html">
        {{ foreach m in value.table }}
            <tr>
                <td scope="row" data-label="@(Amount)">{{ m.amount }}</td>
            </tr>
        {{ end }}
    </script> 
</div>

<script>
    AJAX('POST /get_table/', {}, 'mydata');
</script>

[fgnm]

Yes, $.post is located in a different .js file. It's nice spa but I've some trouble with implementation, AJAX call in works but the foreach cycle is never executed. However the concept is that I've to include JavaScript code that creates the UI into HTML view itself, right?