Skip to content

Instantly share code, notes, and snippets.

@dixonsiu
Created August 3, 2017 04:41
Show Gist options
  • Save dixonsiu/921d26bbc50632b6872a57465bc521c0 to your computer and use it in GitHub Desktop.
Save dixonsiu/921d26bbc50632b6872a57465bc521c0 to your computer and use it in GitHub Desktop.
i18next tips

Issue

When message/label is translated and written directly to the HTML tag, switching to other language will not re-translate such HTML tag.

Wrong way

  1. Execute the following JavaScript to put English message.

     $('dispMsg').html(i18next.t("msg.error.fileNotFound");
    
  2. Result.

     <div id="dispMsg">File not found.</div>
    
  3. Change to Japanese.

     i18next.changeLanguage("ja");
     $('[data-i18n]').localize(); // need jQuery-i18next
    
  4. Result (not translated).

     <div id="dispMsg">File not found.</div>
    

Proper way

  1. Execute the following JavaScript to put English message into the div's attribute.

     $('#dispMsg').attr("data-i18n", "msg.error.fileNotFound")
         .localize();
    
  2. Result.

     <div id="dispMsg" data-i18n="msg.error.fileNotFound">File not found.</div>
    
  3. Change to Japanese.

     i18next.changeLanguage("ja");
     $('[data-i18n]').localize();
    
  4. Result (translated).

     <div id="dispMsg" data-i18n="msg.error.fileNotFound">ファイルがないです。</div>
    
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment