jquery-i18n | simple jQuery plugin | Internationalization library

Please try these two:

th:attrappend='data-i18n-options=|{ "WHERE":"${country}"}|'
or
th:data-i18n-options='|{ "WHERE":"${country}"}|'

For anyone else looking around, I found an overview on this Reddit thread. I'll also explain the option I went with below.

1) Front-End JS (e.g. jquery.i18n)

• Generally fairly easy to implement
• They can negatively impact SEO
• Can increase page weight
• Website doesn't work for people who don't run JS
• Not recommended but ok for very small projects

2) Multiple Pages

• This is easiest to setup, but maintenance becomes a nightmare. Not recommended

3) Server Side (e.g. node-i18n)

• Because it avoid the disadvantages of front-end mentioned above, this is generally recommended for larger projects

4) Using a build tool like npm scripts or gulp (e.g. static-i18n)

• Generates separate directories for each language using build scripts
• Bit of initial set up but easy to maintain and extend
• Since only static html pages are generated, html code can be safely embedded in the translation json files.

In the end I went with option 4 using static-i18n. While it took a bit of setting up, it works well for SEO, works for static sites, is easily maintainable, is scalable, and avoids the messiness of front-end dynamic language loading.

if you get missing that's a sign for the translations in your json file where not loaded at all.

there should be warnings about backend not able to load those in the console.

make sure: locales/en/translation.json is accessible - or fix the path accordingly