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

#javascript #jquery #json

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

Содержимое 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');

});




  RU
  EN



  Привет Мир
  Некоторый текст





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

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

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


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


?
    

Ответы

Ответ 1

Ошибка в 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') );

});




  RU
  EN



  Привет Мир		



  Некоторый текст





  Hello World





  Some Text