Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #11 (permalink)  
Старый 25.02.2017, 17:19
Интересующийся
Отправить личное сообщение для mcmega Посмотреть профиль Найти все сообщения от mcmega
 
Регистрация: 23.02.2017
Сообщений: 12

Гляньте пожалуйста почему не работают селекторы если подключаю переводчик полей {{}}, возможно не запоминается выбранный элемент в списках. Что не так с переводчиком?

<!doctype html>
<html>
<head>
  <title>Test</title>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
</head>
<body>
  <input value="Events" class="btn w45" onclick="createAPISelect('#eve', api[0]);" type="button">
  <div id="eve"></div>
  <script type="text/javascript">
var api = [{  "{{e1}}":[{"{{c1}}":"1","{{c2}}":"2"}], "{{e2}}":[{"{{c3}}":"1","{{c4}}":"2","{{c5}}":"3"}]  }];
function setSelect(sel,obj){
  sel.options.length=0;
  Object.keys(obj).forEach(function(key,k){
    var value=typeof obj[key]=='object' ? key : obj[key];
    sel.options[k]=new Option(key,value);
  })
}
function createAPISelect(id,obj){
  var parEl=document.querySelector(id);
  var select = parEl.querySelectorAll('select')
  var sel = select.length ? select[0] : document.createElement('select');
  sel.className='select w45';
  var selTwo = select.length == 2 ? select[1] : sel.cloneNode();
  setSelect(sel,obj);
  parEl.appendChild(sel);
  parEl.appendChild(selTwo);
  function changeSelect(){setSelect(selTwo,obj[this.value][0]);}
  sel.addEventListener('change',changeSelect);
  changeSelect.bind(sel)();
  LangTranslation(dicTrans);
}
// Переводчик
var dicTrans = {"e1":"it1","c1":"it1.1","c2":"it1.2","e2":"it2","c3":"it2.1","c4":"it2.2","c5":"it2.3"};
function LangTranslation(dicTrans){
  var data=document.getElementsByTagName('body')[0].innerHTML;
  var new_string;
  for(var key in dicTrans){new_string=data.replace(new RegExp('{{'+key+'}}','g'), dicTrans[key]); data=new_string;}
  document.getElementsByTagName('body')[0].innerHTML=data;
}
  </script>
</body>
</html>

Последний раз редактировалось mcmega, 25.02.2017 в 17:40.
Ответить с цитированием
  #12 (permalink)  
Старый 25.02.2017, 17:45
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

mcmega,
потому что вы стираите страницу
Сообщение от mcmega
('body')[0].innerHTML=data;
а значит и все обработчики событий удаляются

Последний раз редактировалось рони, 25.02.2017 в 17:47.
Ответить с цитированием
  #13 (permalink)  
Старый 25.02.2017, 18:08
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

mcmega,
<!doctype html>
<html>
<head>
  <title>Test</title>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
</head>
<body>
  <input value="Events" class="btn w45" onclick="createAPISelect('#eve', api[0]);" type="button">
  <div id="eve"></div>
  <script type="text/javascript">
var api = [{  "{{e1}}":[{"{{c1}}":"1","{{c2}}":"2"}], "{{e2}}":[{"{{c3}}":"1","{{c4}}":"2","{{c5}}":"3"}]  }];
function setSelect(sel,obj){
  sel.options.length=0;
  Object.keys(obj).forEach(function(key,k){
    var value=typeof obj[key]=='object' ? key : obj[key];
    // Переводчик текста option
    var dicTrans = {"e1":"it1","c1":"it1.1","c2":"it1.2","e2":"it2","c3":"it2.1","c4":"it2.2","c5":"it2.3"};
    var trKey = key.replace(/[\{\}]/g,"");
    var text  = dicTrans[trKey]||key ;
    sel.options[k]=new Option(text,value);
  })
}
function createAPISelect(id,obj){
  var parEl=document.querySelector(id);
  var select = parEl.querySelectorAll('select')
  var sel = select.length ? select[0] : document.createElement('select');
  sel.className='select w45';
  var selTwo = select.length == 2 ? select[1] : sel.cloneNode();
  setSelect(sel,obj);
  parEl.appendChild(sel);
  parEl.appendChild(selTwo);
  function changeSelect(){setSelect(selTwo,obj[this.value][0]);}
  sel.addEventListener('change',changeSelect);
  changeSelect.bind(sel)();
}
</script>
</body>
</html>
Ответить с цитированием
  #14 (permalink)  
Старый 25.02.2017, 18:23
Интересующийся
Отправить личное сообщение для mcmega Посмотреть профиль Найти все сообщения от mcmega
 
Регистрация: 23.02.2017
Сообщений: 12

От я балда, совсем забыл про это, спасибо!
Скажите, а никак нельзя модернизировать функцию перевода чтоб она не затрагивала обработчики событий?
Потому что этой функцией переводится вся страница, а словарь dicTrans подгружается из сети. Я его вынес отдельно только для примера.

Последний раз редактировалось mcmega, 25.02.2017 в 18:52.
Ответить с цитированием
  #15 (permalink)  
Старый 25.02.2017, 18:53
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

mcmega,
циклом менять только содержание текстовых узлов...
поиск текстовых узлов и замена текста
только почему это не сервер делает?
Ответить с цитированием
  #16 (permalink)  
Старый 25.02.2017, 19:12
Интересующийся
Отправить личное сообщение для mcmega Посмотреть профиль Найти все сообщения от mcmega
 
Регистрация: 23.02.2017
Сообщений: 12

рони,

Смотрите какая ситуация, Web сервер запущен на WiFi модуле ESP8266 (нагружать его как по объему кода так и по функционалу не желательно, потому что слабоват будет для полноценного сервера).
Поэтому организовано такое взаимодействие: все нужные данные хранятся во флеш модуля и по запросу отправляются в браузер клиента, так как комп на порядок мощнее машина, то и обрабатывать такое лучше на стороне клиента.

Сейчас для построения зависимых select-ов происходит такая последовательность:
0. Загружается весь html
1. Запрашивается файл configs (здесь мы узнаем язык)
2. Запрашивается соответствующий словарь
3. Запрашивается файл api.json
4. Формируется форма из селектов и т.д. (т.е. весь стартовый код html)
5. Производится перевод страницы

а когда я начинаю что то менять (добавлять элементы в html) происходит очередной перевод страницы и ранее выбранные пункты затираются, вот и ломаю голову как поступить правильно.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
зависимые UL LI вместо select (Застрял) chelkaz Элементы интерфейса 18 03.03.2015 11:04
Вставка json данных 1lider AJAX и COMET 5 14.02.2015 21:18
зависимые списки select zazula Элементы интерфейса 48 13.05.2014 21:42
Сортировка JSON данных в цикле Fareastaz jQuery 12 15.03.2013 20:20
Javascript SELECT - зависимые списки zakbc Events/DOM/Window 3 13.01.2013 00:37