Asynchronous language selector using i18next

Question

I am using http://jamuhl.github.com/i18next to localize a static website.

My initialization script is:

jQuery(function($) {
    var setLng = $.url().param('setLng');
    if (setLng)
    {
      language_complete = setLng.split("-");
    }
    else
    {
      language_complete = navigator.language.split("-");
    }
    language = (language_complete[0]);
    console.log("I speak (root): %s", language);

    i18n.init({ lng: language, debug: true }, function() {
        // save to use translation function as resources are fetched
        $(".tzm-i18n").i18n();
        $(".page-i18n").i18n();
        $(".menu-i18n").i18n();
        $(".user-i18n").i18n();
        $(".search-i18n").i18n();
        $(".footer-i18n").i18n();
    });
    // language selector
    var lngSld = false;
    $('.lng_trigger').click(function() {

And here is the HTML:

  <div id="page" class="page-i18n">
    <!--${languages} Bread crumbs -->
      <p data-i18n="welcome.p1"></p>
      <p data-i18n="welcome.p2"></p>
  </div>
  <li id="set-lang"><!-- Language selector -->
    <select id="source">
        <option selected="selected" value="br">Brasil</option>
        <option value="fr">France</option>
        <option value="de">Germany</option>
        <option value="in">India</option>
        <option value="jp">Japan</option>
        <option value="rs">Serbia</option>
        <option value="uk">United Kingdom</option>
        <option value="us">United States</option>
    </select>
  </li>

What is the correct way to set the language when <select> option is clicked and just pull the values for <p data-i18n="welcome.p1"></p> from the /locals/br/translations.json file asynchronously without having to reload the entire page?

How would this then be persisted, if the user then navigates to other pages? I am using https://github.com/allmarkedup/jQuery-URL-Parser but don't see any functions to alter the uri so that the choice is appended to like http://domain.tld/br/.

Answer 1

I would put the translation functions in a separate function (i.e. translatePage()) and call it the first time during init and a second time when the click event handler is fired.

Also, i18next comes with cookie storage (initialized with useCookie: true); you can use this to store your current language with $.i18n.setLng and retrieve it with $.i18n.lng() functions. Then it's easy to redirect to each URI.

I hope this helps.

Answer 2

What manudurand said is correct. Also, you don't need to reload the page, just set the language and translate the strings again like this:

i18n.setLng('en-EN', function() { $('[data-i18n]').i18n(); });

However, in your case instead of...

$('[data-i18n]').i18n();

... it would be ...

    $(".tzm-i18n").i18n();
    $(".page-i18n").i18n();
    $(".menu-i18n").i18n();
    $(".user-i18n").i18n();
    $(".search-i18n").i18n();
    $(".footer-i18n").i18n();