How to use results from i18nextBrowserLanguageDetector

2018-10-11 19:26 T Nguyen imported from Stackoverflow

I'm trying to use i18nextBrowserLanguageDetector to detect the user's browser language settings and redirect them to the translated page if we support their preferred language. The first part of the code below seems to be working fine, and will cache the user's language preference in a cookie correctly.

import i18next from 'i18next';
import LngDetector from 'i18next-browser-languagedetector';

i18next
  .use(LngDetector)
  .init({
    detection: {
      // order and from where user language should be detected
      order: ['cookie', 'navigator', 'htmlTag', 'path'],

      // keys or params to lookup language from
      lookupCookie: LANG_COOKIE,
      lookupFromPathIndex: 0,

      // cache user language on
      caches: ['cookie']
    }
  });

However, the problem I have is that I want to do something based on the user's language setting but it seems like i18next runs their detection code asynchronously but doesn't provide any callback that I can see. Part of the problem is that their docs are really slim. What I've done is to add some code on document ready like so:

document.addEventListener('DOMContentLoaded', () => {
  const langPref = Cookies(LANG_COOKIE);
  if (!!langPref && SUPPORTED_LANGS.includes(langPref) && langPref !== currentLocale())
    window.location.href = `${location.origin}/${langPref}${location.pathname}`;
});

But the language cookie is never set by the time the page completes loading. I could add a setTimeout/Interval but that's kind of hacky and inefficient.

1 answer

answered 2018-10-11 20:21 jamuhl
what about using:
```
i18next.on('languageChanged', function(lng) {
    window.location.href = `${location.origin}/${lng}${location.pathname}`;
});)
```
also use the whitelist option so lng is always what you support ;)
- events: https://www.i18next.com/overview/api#events
- whitelist: https://www.i18next.com/overview/configuration-options#languages-namespaces-resources

See also questions close to this topic

"required" validation not working in javascript

pushData = [];
//+ button when clicked
function myFunction() {
    var custOfficeId = document.getElementById('customOfficeId').value;
    var custOfficeName = $("#customOfficeId option:selected").text();
    var fromDate = document.getElementById('fromDate').value;
    var toDate = document.getElementById('toDate').value;
    var consignmentNo = document.getElementById('consignmentNo').value;
    var selectionName = "A";
    var selectionId = 1;
    var selecOff = {
        custOfficeId,
        custOfficeName,
        fromDate,
        toDate,
        consignmentNo,
        selectionId,
        selectionName
    };
    console.log(selecOff);
    pushData.push(selecOff);
    console.log(pushData);
    populateSelectionCustomTable();
}

function populateSelectionCustomTable() {

    $("#tempTable tbody").html("");
    for (var i = 0; i < pushData.length; i++) {
        var r = pushData[i];
        $("#tempTable tbody")
            .append(
                "<tr>" +
                "<td>" +
                r.custOfficeName +
                "</td><td>" +
                r.fromDate +
                "</td><td>" +
                r.toDate +
                "</td>" +
                "<td>" +
                r.consignmentNo +
                "</td>" +
                "<td>" +
                r.selectionName +
                "</td>" +
                "<td>" +
                "<input id='filter" + i + "' value='Delete' type='button' alt='Delete" +
                i +
                "' class='deleteIcon'/>" +
                "</td></tr></tbody>");
    }

}

<!DOCTYPE html>
<html>
   <head>
      <title></title>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
   </head>
   <body>
      <div class="form-group row">
         <div class="col-md-4">
            <label>Custom Office</label>
         </div>
         <div class="col-md-2">
            <label>From Date</label>
         </div>
         <div class="col-md-2">
            <label>To Date</label>
         </div>
         <div class="col-md-4">Consignment No</div>
         <div class="col-md-4">
            <select class="form-control" id="customOfficeId" required
               name="customOfficeId" >
               <option value="" disabled selected>Choose</option>
               <option value=1>Office 1</option>
               <option value=2>Office 2</option>
            </select>
         </div>
         <div class="col-md-2">
            <input type="text" class="form-control nepali-calendar ndp-nepali-calendar" id="fromDate" 
               onfocus="showNdpCalendarBox('fromDate')" name="fromDate" required/>
         </div>
         <div class="col-md-2">
            <input type="text" class="form-control nepali-calendar ndp-nepali-calendar" id="toDate"
               name="toDate"  onfocus="showNdpCalendarBox('toDate')" required />
         </div>
         <div class="col-md-3">
            <input type="number" class="form-control" id="consignmentNo"
               required name="consignmentNo">
         </div>
         <div class="col-md-1">
            <button onclick="myFunction()">+</button>
         </div>
      </div>
      <table class="table table-bodered" id="tempTable">
         <thead>
            <th>Custom Office</th>
            <th>From Date</th>
            <th>To Date</th>
            <th>Consignment No</th>
            <th>Selection Name</th>
            <th>Action</th>
         </thead>
         <tbody>
         </tbody>
      </table>
   </body>
</html>

I have added the "required" attribute in each of the input field and in select options above in html.But if i even didn't enter any data and click plus button it is getting pushed in table rather it should show me the validation required error. In "select" also i added the required field but the default is getting added in table automatically.How can i make this html5 required validation working here?

Having trouble using instance mode

I am getting errors when I used instance mode in my code. My mini game isn't showing up I am not sure where the error is coming from. It works fine without the instance mode but I need to use the instance mode so that I can reference this code in another file. I'm using this link as a reference. http://p5js.org/examples/instance-mode-instantiation.html

let sketch = function(p) {

    let blob;
    let blobs = [];
    let zoom = 1;
    let timer = 20;
    let hits = false;
    let score = 0;

    p.setup = function() {
        p.createCanvas(600, 600);
        blob = new Blob(0, 0, 64);
        for (let i = 0; i < 300; i++) {
            let x = p.random(-p.width,p.width);
            let y = p.random(-p.height,p.height);
            blobs[i] = new Blob(x, y, 15);
        }
    };

    p.draw = function() {
        p.background(0);

        p.translate(width/2, height/2);
        let newzoom = 64 / blob.r;
        p.zoom = p.lerp(zoom, newzoom, 0.1);
        p.scale(zoom);
        p.translate(-blob.pos.x, -blob.pos.y);

        for (var i = blobs.length-1; i >=0; i--) {
            blobs[i].show();
            if (blob.eats(blobs[i])) {
                blobs.splice(i, 1);
            }
        }

        if (frameCount % 60 == 0 && timer > 0) { // if the frameCount is divisible by 60, then a second has passed. it will stop at 0
            p.timer --;
        }

        if (timer == 0 && score >=250) {
            p.text("You Win", 0, 0);
            p.noLoop();
        }

        if (blob.eats){
            p.console.log("hit");
        }
        if (timer == 0 && score <= 250){
            p.text("You Lose", 0, 0);
            p.textSize(200);
            p.noLoop();
        }

        blob.show();
        blob.update();
    };
};
let myp5 = new p5(sketch);

chrome extention get large time to open popup

I am trying to develop my chrome extention but it take large time to open popup when i use iframe in my code.How to open popup fastly.

<!DOCTYPE html>
<html>
   <body>
      <div >
         <iframe  id="iframeid" class="embed-responsive-item" name="testing" src="my_url" style="
            height: 400px;
            width: 350px;
            border-width:0px;">
         </iframe>   
      </div>
   </body>
</html>

i18next jquery translate element inside another element
how would I go about translating 2 elements when one is inside the other? This is an example of what I mean:
```
<p data-i18n="alreadyregistered" ><a href="login.php" data-i18n="login"></a></p>
```
On this one the outer p gets translated properly but the a doesn't even appear.
```
<p data-i18n="alreadyregistered" data-i18n-target=".inner"><a href="login.php" class="inner" data-i18n="login"></a></p>
```
On this one it's the other way around.

How do I make them both translate?

EDIT: expected output is that the p and a both get my translations and then display the text. this is what I have for both i18n translations: for estonian alreadyregistered: "Kasutaja juba olemas?", login: "Logi sisse", and for english alreadyregistered: "Already have an account?", login: "Login",

So it should display the first part as text and the second a part as a link according to what the user has chosen for their language.
Can't use props when passing { t } (from i18n-react) to stateless component
I have the parent component that has the state:
```
class RecordEdit extends PureComponent {
    state = { 
        allRecordData: {},
        changelog: [
            {hello1: '1'},
            {hello2: '2'}
        ]
    }
```
It tries to render its child and pass the prop to it:
```
<div className='cards-container'>
    <ChangeHistory recordEditHistory={this.state.changelog} />
</div>
```
And the ChangeHistory component tries to map over the received prop to render a list of elements:
```
const ChangeHistoryCard = ({ t }, props) => (
  <CardOuterContainer recordEditHistory={props.recordEditHistory}>
    <h1>{t('История изменений')}</h1>
    {
      props.recordEditHistory &&
      props.recordEditHistory.map(item =>
        <p>{t('Последнее изменение')}: <span>[22.11.2018]</span></p>
      )
    }
  </CardOuterContainer>
);
export default withNamespaces()(ChangeHistoryCard);
```
For some reason, the component always thinks that the recordEditHistory prop is undefined. But if a click on it in the inspector, I can see that the value has been passed successfully:

I don't understand the problem. Can it be because I use i18n and using withNamespaces does something with props or...? I have to idea how to approach this problem.

IMPORTANT: { t } is from i18n-react, I use it to translate the interface to English and back. I tried removing it completely and it didn't help.

EDIT: I tried removing the { t } method and removing withNamesSpaces() HOC from the export and it all works now. But now i can't use i18n-react in this component :(
Extract dynamic i18n languagekeys in vuejs
I use i18n in my single-file-components in vue.js. I want to extract languagekeys from these components with a cli command. The extraction should occur before I serve my files and the webpack bundle. In my Components i use the $t method to set a key.
```
<template>
  <div>
    {{ $t('settings.label1') }}
  </div>
</template>
```
static keys written as a string are not the problem. But dynamic keys are.
```
<template>
  <div>
    {{ $t(label) }}
  </div>
</template>

<script>
export default {
  name: 'TestComponent',
  props: {
    label: {
      type: String
    }
  }
}
</script>
```
My first attempt was to retrieve the files with an fs.readFileSync dynamically and search with a regex for the key. But this only enables me to get all the static language keys. All other Keys which are passed to this component as a prob or stored in a data variable cannot be resolved, because the the app does not get parsed.

Does anyone have a clue how to achieve this, or knows a good tool to use in this case.

Thank You

Laslo

Related questions

How to use results from i18nextBrowserLanguageDetector

1 answer

See also questions close to this topic