Обработчик событий теряет событие в Firefox, когда AJAX DHTML

У меня проблема с обработчиком событий, используемым для обработки таблицы с помощью клавиши табуляции, помещающей в нее поле ввода или поле выбора для редактирования данных в MySQL.

Метод захватывается обработчиком событий, нажатая клавиша проверяется, если TAB, он продолжит проверку данных, если он действителен, он достигает базы данных, чтобы выполнить поиск следующей действительной ячейки, чтобы вставить либо поле nput, либо поле выбора.

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

При тестировании с помощью firebug я обнаружил, что код прерывается внутри функции обработчика клавиш, когда элемент, запускающий событие, заменяется текстовым значением. Более экстравагантным является то, что элемент ajax (список выбора), который должен быть вставлен динамически, на мгновение появляется на экране, а затем исчезает. Затем я попытался удалить элемент с помощью метода removeChild, а затем вставить с помощью innerHTML, но все равно не работает.

        The table code
        <p style='text-align:center'>
        <legend><strong>PRODUTOS</strong></legend></p>

        <table class='resultados' id='produtos'>
          <tr><th style='display:none'>Código</th>
            <th style='text-align:right'>Grupo</th>
            <th style='text-align:center'>Marca</th>
            <th>Descrição</th>
            <th style='text-align:right'>Preço sugerido</th>
            <th><img src='../../../imagens/detalhes/detalhes.png' /></th>
            <th><img src='../../../imagens/img.png' /></th>
            <th><img src='../../../imagens/apaga/apaga.png' /></th>
          </tr>

        <tr class='alt'>
        <td style='display:none' id='codproduto1' title='codproduto'>79</td>

        <td style='text-align:right' title='Grupo' name='descgrupo' id='descgrupo1' onclick='adlg(this);' >ATUALIZAÇÕES</td>

        <td style='text-align:center' title='Marca' name='marca' id='marca1' onclick='adinp(this);'  >    MARCA</td>

        <td title='Descrição' name='descproduto' id='descproduto1' onclick='adinp(this);' >PRODUTO</td>

        <td style='text-align:right' title='Preço sugerido' name='precos' id='precos1' onclick='adinp(this);' >12,00</td>

        <td style='text-align:center' title='Detalhes Produto' id='detfila1' ><input type='image' src='../../../imagens/detalhes/detalhes.png'  onclick='exdetp(this);' /></td>

        <td style='text-align:center' title='Imagem Produto' id='imgfila1' ><input type='image'  src='../../../imagens/img.png' onclick='imgProduto(this);' /></td>

        <td style='text-align:center' title='Apagar Fila' id='apfila1' ><input type='image' src='../../../imagens/apaga/apaga.png' onclick='apProduto(this);' /></td>
    </tr>

        <tr class=''>
        <td style='display:none' id='codproduto2' title='codproduto'>81</td>
        <td style='text-align:right' title='Grupo' name='descgrupo' id='descgrupo2' onclick='adlg(this);' >ATUALIZAÇÕES</td>

        <td style='text-align:center' title='Marca' name='marca' id='marca2' onclick='adinp(this);'  >MARCA</td>

        <td title='Descrição' name='descproduto' id='descproduto2' onclick='adinp(this);' >PRODUTO2</td>

        <td style='text-align:right' title='Preço sugerido' name='precos' id='precos2' onclick='adinp(this);' >54,00</td>

        <td style='text-align:center' title='Detalhes Produto' id='detfila2' ><input type='image' src='../../../imagens/detalhes/detalhes.png'  onclick='exdetp(this);' /></td>

        <td style='text-align:center' title='Imagem Produto' id='imgfila2' ><input type='image' src='../../../imagens/img.png' onclick='imgProduto(this);' /></td>

        <td style='text-align:center' title='Apagar Fila' id='apfila2' ><input type='image' src='../../../imagens/apaga/apaga.png' onclick='apProduto(this);' /></td>
    </tr>


        <tr class='alt'>
        <td style='display:none' id='codproduto3' title='codproduto'>80</td>

        <td style='text-align:right' title='Grupo' name='descgrupo' id='descgrupo3' onclick='adlg(this);' >NOVO GRUPO 4</td>

        <td style='text-align:center' title='Marca' name='marca' id='marca3' onclick='adinp(this);'  >MARCA</td>

        <td title='Descrição' name='descproduto' id='descproduto3' onclick='adinp(this);' >PRODUTO3</td>

        <td style='text-align:right' title='Preço sugerido' name='precos' id='precos3' onclick='adinp(this);' >23,40</td>

        <td style='text-align:center' title='Detalhes Produto' id='detfila3' ><input type='image' src='../../../imagens/detalhes/detalhes.png'  onclick='exdetp(this);' /></td>

        <td style='text-align:center' title='Imagem Produto' id='imgfila3' ><input type='image' src='../../../imagens/img.png' onclick='imgProduto(this);' /></td>

        <td style='text-align:center' title='Apagar Fila' id='apfila3' ><input type='image' src='../../../imagens/apaga/apaga.png' onclick='apProduto(this);' /></td>
        </tr>
        </table> 

    The Javascript functions 


        /*ADD THE SELECT BOX OF  GROUPS*/
        function adlg (cell){
      ValueCell = cell.innerHTML;//Value from the cell
      var aPag = 'include/php/produtos/combo/combogrupo.php';
      var fat="&dados="+ValueCell;
      ajax(aPag,fat,false);
      if (oPed.readyState==4 && oPed.status==200){
        document.getElementById(cell.id).innerHTML=oPed.responseText;
        var myInput = document.getElementById("cel");/*Select box of the product groups*/
        myInput.focus();   
        adescuta('keydown','onkeydown',segtp,myInput);/* Adds the listen event */
      }     
        }
        /*ADDS THE LISTEN EVENT TO THE INPUT OR COMBO BOX------*/
        function adescuta(evento1, evento2, keyhand, myInput){
        /*events, function Input*/
      if(myInput.addEventListener )myInput.addEventListener(evento1,keyhand ,true);
      else if(myInput.attachEvent ) myInput.attachEvent(evento2,keyhand); 
    }
        /*------KEY HANDLER FOR PRODUCTS TABLE*/
       function segtp(e) {        
      var TABKEY = 9;   
      var ESCKEY = 27;   
      var ENTERKEY = 13;
      var pad;
      if(e.keyCode == TABKEY || e.keyCode==ENTERKEY) {
        stope(e);//Deter o evento por defeito
        var input= document.getElementById('cel');
        var cel= pegceldoi(input);
        var attonblur=input.getAttribute('onblur');
        var getnode=input.onblur='';
        if(ValueCell!=input.value){      
          err=atbdp(input);//update in database
          if (err!=true){
           alert (err);
           input.focus();
           input.setAttribute('onblur',attonblur);
           return false;
          }else{
            pad=/precos.+/;//
            if (pad.test(cel.id))input.value=number_format(numjs(input.value),2,',','.');
            cel.innerHTML=input.value.toUpperCase();
          }
        }else cel.innerHTML=ValueCell;
        if (e.keyCode== TABKEY){
          cel = percorretabela(cel,'produtos');/*look for valid cel*/
          pad=/descgrupo.+/;
          if(pad.test(cel.id))  adlg(cel);/*Add a select box*/
          else adinp(cel);// /*Add an input box*/
        }
        }
        }
        /*UPDATE */

        function atbdp(input){
          var padsf= new Array(/codproduto.+/,/marca.+/,/descproduto.+/,/descgrupo.+/,/precos.+/);//Padrões da fila
        var dadoscel=input.value;//Data
        var cel=pegceldoi(input);//Cell
        pad=/marca.+/;//Pattern exclude
        if(!pad.test(cel.id)&& vazio(dadoscel)==false) return 'Por favor preencha os dados do registro';//If input not filled
      var aPag = 'include/php/produtos/atualiza/atprodutos.php';
      var produto= pegvf(input,padsf,'produtos');/*patterns of the row*/ fat="&codproduto="+produto[0]+"&marca="+produto[1]+"&descproduto="+produto[2]+"&descgrupo="+produto[3]+"&precos="+numjs(produto[4]);
      ajax(aPag,fat,false);
      if (oPed.readyState==4 && oPed.status==200){
        if(oPed.responseText!='') return oPed.responseText;
        else return true;
      }
    }
    /*---------------AJAX*/
    function ajax(aPag,dados,bool){
      var oRand = parseInt (Math.random()*99999999999999);
      var fNovo="rand="+oRand+dados
      var oURL = aPag;
      oPed=  getXMLHTTPRequest ();
      oPed.open ("POST", oURL, bool);
      oPed.setRequestHeader("Content-type", "application/x-www-form-urlencoded");   // Setando Content-type
      oPed.setRequestHeader("Content-length", fNovo.length);
      oPed.send(fNovo);
    }
    /*ADD INPUT TO THE TABLE */
    function adinp (cell){/*Cell that called the function*/
      var id = cell.id;//Identficador da célula clikada
      ValueCell = cell.innerHTML;/*Value from the cell*/
      var valin="value='"+ValueCell+"'";
      var longInput='', size='';//Tamanho máximo e tamanho do input
      var pad=/marca.+/;//Padrão de ndetificação da célula da marca
      if (pad.test(id)){
        longInput="maxlength='15'";
        size="size='13'";
      }else{
        pad=/descproduto.+/;
        if (pad.test(id)){
          longInput="maxlength='145'";
          size="size='45'";
        }else{
          longInput="maxlength='14'";
          size="size='14'";
          valin="value='"+numsim(ValueCell)+"'";
        }
      }
      cell.innerHTML = "<form name='produtos' style='margin:0; padding:0; padding-left:0; margin-left:0; position:relative'"
      +" onsubmit=' return false;'><input style='margin-left:2px; padding-left:2px' id='cel'"
      +" onblur='atpb(this);'"//Update on blur
      +" onclick='event.cancelBubble=true;'" 
      +" type='text' "
      +valin+" "
      +longInput+" "+size+" /><div class='campoexiste' id='existe'></div></form>";
      document.getElementById('cel').focus();
      var myInput = document.getElementById("cel");  
      adescuta('keydown','onkeydown',segtp,myInput); }
    /*----------------STOP EVENT----------------------------*/
    function stope(e){//Deter o evento por defeito
      if(e.preventDefault)  e.preventDefault();
      else{
        e.stop();
        e.returnValue = false;
        e.stopPropagation();        
      }
    }
    /*--------GET VALUES FROM ROW*/
    function pegvf(input,padsfila,nomtab){//Input, array com os padrões da fila, nome da tabela
      var vfila=new Array;//Valores da fila
      var cel=pegceldoi(input);//Célula que contém o input
      var idfila=cel.parentNode.rowIndex;//Índice da fila da célula
      var x;//Contador do array contador de colunas
        for (x in padsfila){
          if (padsfila[x].test(cel.id))vfila.push(input.value);
          else vfila.push(pegvalcel(padsfila[x],idfila,nomtab));
        }
      return vfila
    }
    ARCHIVO PHP
    Combogrupos.php
    <? 
    /*-----------------SELECT BOX OF----GROUPS*/
    $dados = addslashes(trim(utf8_decode($_POST['dados'])));//Nome do grupo que estava na célula
    $stl="style='margin-left:2px;padding-left:2px'";//Estilo da lista
    $atob="onblur='atpb(this);'";//Função atualiza on blur
    $occb="onclick='event.cancelBubble=true;'";//Cancela eventos bubble do evento click
    $lig="<select id='cel' $stl $atob $occb >";//Lista grupos
    $link=mysql_connect('localhost', '','');
    $db = mysql_select_db("fbinfo",$link);
    $query="SELECT * FROM gruposproduto";
    $res = mysql_query($query,$link);
    echo mysql_error();
    $num=mysql_num_rows($res);
    $sel;//Opção selecionada
    if ($num>0){
      $lig.="<option value='null'>Seleccione um grupo</option>";
      while ($fila = mysql_fetch_array($res, MYSQL_BOTH)){
          if ($fila['descgrupo']==$dados)$sel="selected='selected'";
          else $sel='';
          $lig.="<option $sel value='".$fila['descgrupo']."'>".$fila['descgrupo']."</option>";
      }
    }else{
      $lig.="<option value='null'>Não há grupos</option>";
    }
    $lig.="</select><div id='existe'></div>";
    mysql_close($link);
    echo $lig;
    ?>
    Atprodutos.php
    <? 
    /*-----------UPDATE PRODUCTS*/
    include ('../../util/upper/upper.php');//Função que passa as letras para caixa alta
    foreach ($_POST as &$value)$value=utf8_decode(upper($value));//Decodifica as informações da página 
    $link = mysql_connect('localhost', 'root','fbi02');
    $db = mysql_select_db("fbinfo",$link);
    $query= "SELECT codproduto FROM produtos JOIN gruposproduto AS g ON produtos.idgrupo= g.idgrupo WHERE descproduto='"
    .$_POST['descproduto']."' AND marca='".$_POST['marca']."' AND g.descgrupo='". $_POST['descgrupo']."'";
    $res = mysql_query($query,$link);
    echo mysql_error();
    $num=mysql_num_rows($res);
    if ($num>0){
      $fila=mysql_fetch_array($res);
      if ($fila['codproduto']!=$_POST['codproduto']){
        echo "O produto já existe";
        die;
      }
    }
    $query="UPDATE produtos SET descproduto='".$_POST['descproduto']."' , marca='".$_POST['marca']."' , precos=".$_POST['precos'].", idgrupo=(SELECT idgrupo FROM gruposproduto WHERE descgrupo='".$_POST['descgrupo']."') WHERE codproduto='".$_POST['codproduto']."'";
    $res = mysql_query($query,$link);
    echo mysql_error();
    mysql_close($link);
    ?>

person ricbecen    schedule 16.08.2011    source источник


Ответы (2)


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

person Diodeus - James MacFarlane    schedule 16.08.2011
comment
Извините, но я не понимаю, я перехватываю событие и использую методы e=event e.preventDefault(), e.stop()e.returnValue = false, e.stopPropagation() Это должно остановить событие как в IE, так и Firefox, затем используйте функцию, чтобы просмотреть таблицу, и когда будет найдена следующая допустимая ячейка, вызывается функция ajax. Однако почему, если эта функция вызывается внутри обработчика событий, она теряет область действия и прерывается в firefox? Как событие могло быть повторно инициализировано после того, как оно было остановлено? Цепочка функций представляет собой функцию segtp(e) =› stope(e) =› percorretabela(cel,'produtos')=›adlg(cel)=lose - person ricbecen; 18.08.2011
comment
Как я могу повторно инициализировать обработчик событий? - person ricbecen; 23.08.2011
comment
Повторно запустите тот же код, который вы использовали для подключения обработчика событий в первый раз. - person Diodeus - James MacFarlane; 23.08.2011
comment
Вы хотите запустить функцию segtp(event) после XMLHTTP.open? - person ricbecen; 30.08.2011
comment
Взгляните на функциональность jQuery .live(). Это поможет. - person Diodeus - James MacFarlane; 30.08.2011
comment
Я пробовал метод live() следующим образом: $(myInput).live(keypress,myfunction); //Не работает - person ricbecen; 30.08.2011
comment
Живой метод занимает намного больше времени, вызывает случайную позицию в таблице в IE, а в firebug теряет строку отладки после простого cell.textContent=ABC; тогда ajax работает один раз, а отладчик никогда больше, пока Firefox не перезапустится - person ricbecen; 06.09.2011

Ошибка заключалась в использовании false для асинхронного метода в AJAX-запросе, который получает список. Изменение asyncronous на true и установка проверки и курорта таблицы из функции обработчика событий решили проблему.

Спасибо за всю помощь, я очень ценю все комментарии и решения, которые дали мне много идей для поиска решения.

person ricbecen    schedule 04.10.2011