Смена языков на стороне клиента — JavaScript (jQuery)

385
12 февраля 2018, 05:40

Хочу сделать смену языка на страничке на стороне клиента. Попалась одна статья - на хабре, но примера там уже нет.

Содержимое 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'); 
 
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
 
 
<menu> 
  <a href="#" class="link" id="ru">RU</a> 
  <a href="#" class="link" id="en">EN</a> 
</menu> 
 
<p lng="rus"> 
  Привет Мир 
  Некоторый текст 
</p>

Но ничего не происходит, ошибок нет и json - status 200.

console.log(response + ' ' + lng); - выводит [object Object] undefined

Как можно запустить перевод на страничке по клику на кнопку, что делаю не так? Как и с функцией $.getLanguage, как ее можно использовать,

будет нужен для того, что бы иметь возможность в произвольном месте с помощью javascript вынуть нужную строку, текущего языка,

?

READ ALSO
Как узнать какой элемент был нажат первым?

Как узнать какой элемент был нажат первым?

У меня через делегирование события отлавливается нажатие

232
Задержка (delay)

Задержка (delay)

На экран выводится множество блоков, пользователь должен нажать на 5 блоков, после чего произойдет событие и эти 5 блоков исчезнутНа блоках...

332
Как программно вызвать submit redux формы с валидацией?

Как программно вызвать submit redux формы с валидацией?

У меня есть обработчик по своей кнопке, в которой мне нужно получить значения формы, пройти их валидацию и если всё нормально отправить post запрос

203