Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 30.09.2016, 23:23
qsc qsc вне форума
Новичок на форуме
Отправить личное сообщение для qsc Посмотреть профиль Найти все сообщения от qsc
 
Регистрация: 30.09.2016
Сообщений: 4

Повторная установка обработчика с новыми данными
Здравствуйте!
Проблема: после установки нового значения select в setHandler передаются не новые, а первоначальные данные. В чем моя ошибка? Зарание благодарю!
=====================================
Эта функция запускается при новом значении select.

function triggerSelect(contentSlider, itemSlctdId){
    console.log('60. Инициализация replaceSliderValRelationInput');
    setTimeout(function(){
      itemSlctd = $(frmSlct).find('.item-selected');
      itemSlctdId = $(itemSlctd).attr('data-id');
      var max;
      var baseContentSliderVal;

      console.log('parseInt(itemSlctdId) ', parseInt(itemSlctdId));
      switch(parseInt(itemSlctdId)){
        case 1: max = 34; baseContentSliderVal = 0;  break;
        case 2: max = 10; baseContentSliderVal = 34; break;
        case 3: max = 22; baseContentSliderVal = 0;  break;
        case 4: max = 5;  baseContentSliderVal = 22; break;
        case 5: max = 2;  baseContentSliderVal = 27; break;
        case 6: max = 3;  baseContentSliderVal = 29; break;
        case 7: max = 2;  baseContentSliderVal = 32; break;
        case 8: max = 10; baseContentSliderVal = 34; break;
        default: console.log('Error!!!'); return 1; 
      }
      console.log('61.1 max', max, 'baseContentSliderVal', baseContentSliderVal);
      replaceSliderValRelationInput(contentSlider, max, baseContentSliderVal);
    }, 0);
  };


Когда фокус попадает или снимается с input text, работает эта функция:
var replaceSliderValRelationInput = function(contentSlider, max, baseContentSliderVal) {
    console.log('38. Замена значений слайдера и зависимых от него по вводу номера в input');
    // Код...

    console.log('61.2 max', max, 'baseContentSliderVal', baseContentSliderVal);
    $(contentSlider).focusin({max: max, baseContentSliderVal: baseContentSliderVal},function(eventObject){
      console.log('61.3 max', eventObject.data.max, 'baseContentSliderVal', eventObject.data.baseContentSliderVal);
      setHandler(this);
    }).focusout(function(){
      // stateMashine(2, this);
      removeHandler(this); 
    });
  };
Ответить с цитированием
  #2 (permalink)  
Старый 01.10.2016, 09:17
Аватар для dd_smol
Кандидат Javascript-наук
Отправить личное сообщение для dd_smol Посмотреть профиль Найти все сообщения от dd_smol
 
Регистрация: 08.03.2015
Сообщений: 131

Первое что бросается в глаза не вдаваясь в суть проблемы это то что каждый раз вы назначаете новые событие вызывая функцию replaceSliderValRelationInput при этом старые не удаляете.

И той информации что вы предоставили виде кода для меня лично мало чтоб разобраться в проблеме т.к. я могу только гадать что приходит в переменные как и когда вызываются функции и т.д.
Ответить с цитированием
  #3 (permalink)  
Старый 01.10.2016, 12:06
qsc qsc вне форума
Новичок на форуме
Отправить личное сообщение для qsc Посмотреть профиль Найти все сообщения от qsc
 
Регистрация: 30.09.2016
Сообщений: 4

Исходил из того, что не важно сколько раз я начинаю функцию, важно то, сколько обработчиков висит на input. Если переключается select, и focus покидает input, то все обработчики input должны сняться функцией removeHandler(), если были установлены через setHandler(). Я прав?

P.S. После выбора нового значения в Select новые данные попадают в сообщения консоли под номером 61.2, а после клика по input в 61.3 остаются первоначальные - полученные при загрузке страницы. Я не понимаю почему в 61.3 не попадает то, что уже попало в 61.2.

Последний раз редактировалось qsc, 01.10.2016 в 12:21.
Ответить с цитированием
  #4 (permalink)  
Старый 01.10.2016, 12:09
qsc qsc вне форума
Новичок на форуме
Отправить личное сообщение для qsc Посмотреть профиль Найти все сообщения от qsc
 
Регистрация: 30.09.2016
Сообщений: 4

Вот "полный" код:
<div class="form-cntrl form-select">
  <i class="fa fa-caret-down" aria-hidden="true"></i>
  <span class="item-selected" data-id="1">Виоргоны</span>
  <ul class="list hidden" >
    <li class="item" data-id="1">Виоргоны</li>
    <li class="item" data-id="2">Виофтаны</li>
  </ul>
</div>

<input type="text" class="form-cntrl contentSlider form-control" placeholder="Номер: 01">

var contentSlider = $(contentForm).find('.contentSlider');
var itemSlctdId = $(itemSlctd).attr('data-id');

  var replaceSliderValRelationInput = function(contentSlider, max, baseContentSliderVal) {
    console.log('38. Замена значений слайдера и зависимых от него по вводу номера в input');
    var focusInp = false;

    function setSlide(ths){
        var inpVal = $(ths).val();
        flagSlideInput = true;
        contentSliderVal = inpVal - 1 + baseContentSliderVal;
        $(contentSliderBox).slider('value', contentSliderVal); 
    }

    function analizToken (ths) {
      console.log('44. Анализ числа в input');
      console.log('    max', max);
      var inpVal = $(ths).val();
      if (inpVal[0] === undefined){
        // console.log('45. Новое значение слайдера еще не задано 1');
        return true;
      }else if (inpVal[0] === '0'){
        // console.log('first 0');
        if (inpVal[1] === undefined){
          // console.log('46. Новое значение слайдера еще не задано 2');
          return true;
        }else if (inpVal[1] === '0'){
          // console.log('47. Значение слайдера задано с ошибкой 1');
          return false;
        }else if ((1 <= parseInt(inpVal[1])) && (parseInt(inpVal[1]) <= max)){
          // console.log('48. Установка слайдера 1');
          return true;  
        }
      }else if ((1 <= parseInt(inpVal)) && (parseInt(inpVal) <= max)){
        // console.log('49. Установка слайдера 2');
        return true;  
      }
      // console.log('50. Значение слайдера задано с ошибкой 2');
      return false;
    }

    function removeChar(ths){
      // console.log('43. Удаление последнего введенного символа слева от курсора');

      $(ths).css({'background-color': '#FFE2BF'});
      setTimeout(function(){
        stateMashine(4, $(ths));
        $(ths).css({'background-color': '#FFFCE3'});
      }, 200);
    }

    function getCaretPosition(obj){
      // console.log('42. Вычисление положения курсора');
      var cursorPos = null;
      if (document.selection){
        var range = document.selection.createRange();
        range.moveStart('textedit', -1);
        cursorPos = range.text.length;
      }else{
        cursorPos = obj.selectionStart;
      }
      return cursorPos;
    }

    function setCaretPosition(obj, cursorPos){
      // console.log('41. Установка положения курсора');
      if (document.selection){
        var range = document.selection.createRange();
        range.moveEnd('textedit', cursorPos); // Проверить на осле
        range.moveStart('textedit', cursorPos);
      }else{
        obj.selectionEnd = obj.selectionStart = cursorPos;
      }
    }

    function stateMashine(evnt, ths, key){
      console.log('39. stateMashine');
      // console.trace();
      var strVl = $(ths).val();
      var strVlBuf = [];
      var lngVl = strVl.length;
      var idxPn = getCaretPosition($(ths).get(0)) - 1;
      var strPl;
      // console.log('lngVl', lngVl);
      switch(evnt){
        case 3: 
          // console.log('53. stateMashine 3 =======================================');
          if (lngVl < 2){
            strVlBuf[0] = strVl.substring(0, idxPn + 1);
            strVlBuf[1] = strVl.substring(idxPn + 1);
            $(ths).val(strVlBuf[0] + key + strVlBuf[1]);
            setCaretPosition($(ths).get(0), idxPn + 2);
          }else{
            console.log('stop: 3'); 
            setTimeout(function(){
              strVlBuf[0] = strVl.substring(0, idxPn + 1);
              strVlBuf[1] = strVl.substring(idxPn + 1);
              $(ths).val(strVlBuf[0] + key + strVlBuf[1]);
              setCaretPosition($(ths).get(0), idxPn + 2);
            },0);
            removeChar(ths);
          }
          break;
        case 4: 
          // console.log('54. stateMashine 4');
          if ((lngVl > 0) && (idxPn >= 0)){
            strVlBuf[0] = strVl.substring(0, idxPn);
            strVlBuf[1] = strVl.substring(idxPn + 1);
            $(ths).val(strVlBuf[0] + strVlBuf[1]);
            setCaretPosition($(ths).get(0), idxPn);
          }else console.log('stop: 4');
          break;
        case 5:
          // console.log('55. stateMashine 5');
          if ((lngVl > 0) && (idxPn >= -1)){
            strVlBuf[0] = strVl.substring(0, idxPn + 1);
            strVlBuf[1] = strVl.substring(idxPn + 2);
            $(ths).val(strVlBuf[0] + strVlBuf[1]);
            setCaretPosition($(ths).get(0), idxPn + 1);
          }else console.log('stop: 5');
          break;
        case 6:
          // console.log('56. stateMashine 6');
          if ((lngVl > 0) && (idxPn >= 0)){
            setCaretPosition($(ths).get(0), idxPn);
          }else console.log('stop: 6');
          break;
        case 7:
          // console.log('57. stateMashine 7');
          if ((lngVl > 0) && (idxPn < lngVl - 1)){
            setCaretPosition($(ths).get(0), idxPn + 2);
          }else console.log('stop: 7');
          break; 
        case 8:
          // console.log('58. stateMashine 8');
          if ((lngVl > 0) && (idxPn >= 0)){
            setCaretPosition($(ths).get(0), 0);
          }else console.log('stop: 8');
          break; 
        case 9:
          // console.log('59. stateMashine 9');
          if ((lngVl > 0) && (idxPn < lngVl - 1)){
            setCaretPosition($(ths).get(0), lngVl);
          }else console.log('stop: 9');
          break;                            
        default: 
          console.log('Exit default');
          break;
      }
    }

    function readKey(eventObject){
      console.log('40. Чтение вводимых символов');
      var key = eventObject.which;
      var ths = eventObject.currentTarget;
      // console.log(key);
      eventObject.preventDefault();
      if       ((48 <= key) && (key <= 57 )){ stateMashine(3, $(ths), key - 48);  
        if (!analizToken(ths)) removeChar(ths); 
        else setSlide(ths);
      }else if ((96 <= key) && (key <= 105)){ stateMashine(3, $(ths), key - 96);  
        if (!analizToken(ths)) removeChar(ths); 
        else setSlide(ths);
      }else if (key ===  8)                 { stateMashine(4, $(ths));            
        if (!analizToken(ths)) removeChar(ths); 
        else setSlide(ths);
      }else if (key === 46)                 { stateMashine(5, $(ths));            
        if (!analizToken(ths)) removeChar(ths); 
        else setSlide(ths);
      }else if((key === 37) || (key === 38)){ stateMashine(6, $(ths));
      }else if((key === 39) || (key === 40)){ stateMashine(7, $(ths));
      }else if((key === 33) || (key === 36)){ stateMashine(8, $(ths));
      }else if((key === 34) || (key === 35)){ stateMashine(9, $(ths));
      }
    }

    function setHandler(ths){
      console.log('51. setHandler');
      $(ths).keydown(readKey);
      strPl = $(ths)
        .attr('placeholder')
        .split(' ');
      strPl[0] = strPl[0].replace(':','');
      $(ths).attr('placeholder', strPl[0]);
      console.log('61.4 max', max, 'baseContentSliderVal', baseContentSliderVal);
      // max = 3;
      focusInp = true;
    }

    function removeHandler(ths){
      console.log('52. removeHandler'); 
      if (focusInp){
        strPl = $(ths).attr('placeholder') + ': ';
        $(ths).val('');
        contentSliderVal = $(contentSliderBox).slider('value');
        replaceInputsRelationSliderVal(contentSliderVal, strPl, contentSlider);
        $(ths)
          .unbind('keydown', readKey);
      }
      focusInp = false;
    }

    
    console.log('61.2 max', max, 'baseContentSliderVal', baseContentSliderVal);
    $(contentSlider).focusin({max: max, baseContentSliderVal: baseContentSliderVal},function(eventObject){
      console.log('61.3 max', eventObject.data.max, 'baseContentSliderVal', eventObject.data.baseContentSliderVal);
      setHandler(this);
    }).focusout(function(){
      removeHandler(this); 
    });
  };

  function triggerSelect(contentSlider, itemSlctdId){
    console.log('60. Инициализация replaceSliderValRelationInput');
    setTimeout(function(){
      itemSlctd = $(frmSlct).find('.item-selected');
      itemSlctdId = $(itemSlctd).attr('data-id');
      var max;
      var baseContentSliderVal;

      console.log('parseInt(itemSlctdId) ', parseInt(itemSlctdId));
      switch(parseInt(itemSlctdId)){
        case 1: max = 34; baseContentSliderVal = 0;  break;
        case 2: max = 10; baseContentSliderVal = 34; break;
        case 3: max = 22; baseContentSliderVal = 0;  break;
        case 4: max = 5;  baseContentSliderVal = 22; break;
        case 5: max = 2;  baseContentSliderVal = 27; break;
        case 6: max = 3;  baseContentSliderVal = 29; break;
        case 7: max = 2;  baseContentSliderVal = 32; break;
        case 8: max = 10; baseContentSliderVal = 34; break;
        default: console.log('Error!!!'); return 1; 
      }
      console.log('61.1 max', max, 'baseContentSliderVal', baseContentSliderVal);
      replaceSliderValRelationInput(contentSlider, max, baseContentSliderVal);
    }, 0);
  };
  triggerSelect(contentSlider, itemSlctdId);

Последний раз редактировалось qsc, 01.10.2016 в 12:19.
Ответить с цитированием
  #5 (permalink)  
Старый 01.10.2016, 21:31
qsc qsc вне форума
Новичок на форуме
Отправить личное сообщение для qsc Посмотреть профиль Найти все сообщения от qsc
 
Регистрация: 30.09.2016
Сообщений: 4

Проблему решил вместо передачи параметров(max ...) передал в качестве callbacka функцию triggerSelect()

Последний раз редактировалось qsc, 01.10.2016 в 22:10.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Калькулятор с вариантом значений. dzho Общие вопросы Javascript 45 06.08.2017 03:54
необходимо очистить страницу полностью и заполнить новыми данными madgals Events/DOM/Window 8 13.05.2012 21:46
Установка обработчика события dvikv jQuery 5 13.03.2012 19:51