I'm having trouble setting up the resGetPath attribute in i18next to access translation.json files locally. When I initialize the plugin with the resources object, everything works fine. However, when using the resGetPath attribute, I can't seem to get it to work correctly. I suspect there may be an issue with the path or the JSON file structure, but I haven't been able to find a solution on Stack Overflow or other forums for i18next. My goal is to reference the local translation file based on the user's chosen locale. Thank you for your help =).
Here is the code from translation.js that loads successfully into index.html:
$(document).ready(function() {
i18next.init({
lng: 'en',
resGetPath:'../locales/{{lng}}/translation.json',
}, function (err, t) {
jqueryI18next.init(i18next, $, {
tName: 't',
i18nName: 'i18n',
handleName: 'localize',
selectorAttr: 'data-i18n',
targetAttr: 'i18n-target',
optionsAttr: 'i18n-options',
useOptionsAttr: false,
parseDefaultValueFromContent: true
});
$('#tempTarget').localize();
})
});
And here is the content of locales/en/translation.json:
{
"nav": {
"newInvoice": "somethaaaang"
}
}
Below is my directory structure:
index.html
locales
en
translation.json
This is the line in the HTML that works with the resources object but not with the reGetPath attribute:
<a href="/new-invoice/" data-i18n='nav.newInvoice' id='tempTarget' class="panel-close">New Invoice</a>