Хочу сделать смену языка на страничке на стороне клиента. Попалась одна статья - на хабре, но примера там уже нет.
Содержимое json файлов как и в примере.
languages/eng.json
{
"hello_world":"Hello World",
"some_text":"Some Text"
}
languages/rus.json
{
"hello_world":"Привет Мир",
"some_text":"Некоторый текст"
}
Код функции из примера:
var LANGUAGE;
$.redrawLanguage = function (lang) {
$.ajax({
url : 'languages/' + lang + '.json', //тянем файл с языком
dataType : 'json',
success : function (response) {
LANGUAGE = response; //записываем в глобальную переменную, а вдруг пригодиться
$('body').find("[lng]").each(function () //ищем все элементы с атрибутом
{
var lng = LANGUAGE[ $(this).attr('lng') ]; //берем нужное значение по атрибуту lng
var tag = $(this)[0].tagName.toLowerCase();
switch (tag) //узнаем название тега
{
case "input":
$(this).val(lng);
break;
default:
$(this).html(lng);
break;
}
});
}
});
}
В своем примере хочу реализовать данный перевод по клику на соответствующую кнопку RU\EN:
var LANGUAGE = false;
$.redrawLanguage = function (lang) {
$.ajax({
url : 'languages/' + lang + '.json', //тянем файл с языком
dataType : 'json',
success : function (response) {
LANGUAGE = response;
$('body').find("[lng]").each(function () {
var lng = LANGUAGE[ $(this).attr('lng') ];
var tag = $(this)[0].tagName.toLowerCase();
console.log(response + ' ' + lng);
switch (tag) {
case "input":
$(this).val(lng);
break;
default:
$(this).html(lng);
break;
}
});
}
});
}
$.getLanguage = function (key) {
if (typeof(LANGUAGE[key]) != 'undefined') {
return LANGUAGE[key];
}
return key;
}
$('#ru').on('click', function(e){
e.preventDefault();
var
$this = $(this);
$.redrawLanguage('eng');
});
$('#en').on('click', function(e){
e.preventDefault();
var
$this = $(this);
$.redrawLanguage('rus');
});
Привет Мир Некоторый текст
Но ничего не происходит, ошибок нет и json - status 200.
console.log(response + ' ' + lng); - выводит [object Object] undefined
Как можно запустить перевод на страничке по клику на кнопку, что делаю не так? Как и с функцией $.getLanguage, как ее можно использовать,
будет нужен для того, что бы иметь возможность в произвольном месте с помощью javascript вынуть нужную строку, текущего языка,
?
Ответ
Ошибка в html-
, нужно использовать не язык, а ключ -
, а функция уже вызывается с соответствующим, нужным языком (имя нужного json файла) - $.redrawLanguage('eng'); или $.redrawLanguage('rus');
var LANGUAGE = false;
$.redrawLanguage = function (lang) {
$.ajax({
url : 'languages/' + lang + '.json', //тянем файл с языком
dataType : 'json',
success : function (response) {
LANGUAGE = response;
$('body').find("[lng]").each(function () {
var lng = LANGUAGE[ $(this).attr('lng') ];
var tag = $(this)[0].tagName.toLowerCase();
switch (tag) {
case "input":
$(this).val(lng);
break;
default:
$(this).html(lng);
break;
}
});
}
});
}
$.getLanguage = function (key) {
if (typeof(LANGUAGE[key]) != 'undefined') {
return LANGUAGE[key];
}
return key;
}
$('#ru').on('click', function(e){
e.preventDefault();
var
$this = $(this);
$.redrawLanguage('eng');
});
$('#en').on('click', function(e){
e.preventDefault();
var
$this = $(this);
$.redrawLanguage('rus');
console.log($.getLanguage('hello_world') );
console.log($.getLanguage('some_text') );
});
Привет Мир
Некоторый текст
Hello World
Some Text
Комментариев нет:
Отправить комментарий