How to create and display a list of emails with json output with form information

Question

The goal of the project is to generate a list of "emails" coming from the contact form, to show in a list of type li with the following data: - name - subject matter - delivery time

I also need the user to click a certain field that changes the status from 0 to 1 (meaning it has been read).

The problem is happening in the last step, to catch the id user, is not updating the data, follow my javascript code:

document.addEventListener('DOMContentLoaded', function(){
    var total_not = document.getElementsByClassName('badge')[0],
                    res = document.getElementById('res');

    window.setInterval(function(){
        xhr.get('../includes/request.php?acao=verificar', function(total){
                total_not.innerHTML = total;
            });
        }, 1000);

        window.setInterval(function(){
            xhr.get('../includes/request.php?acao=getnots', function(nots){
                res.innerHTML = nots;
            });
        }, 1000);

        res.addEventListener('click', function(e){
        var elemento = e.target;

        if(elemento.classList.contains('vis')){
            xhr.get('../includes/request.php?acao=vis&idnot='+elemento.value, function(res){
                    alert(res);
                });
            }else{
                alert('nao entro no if');
            }
    });
});

In it I’m adding an event to the div res, this div is generated by javascript. All these requests I handle on the PHP page request.php as shown below:

<?php 
    include_once('conexao.php');

    $POST = $_GET['acao'];

    switch ($POST) {
        case 'contato':

        $ip = $_SERVER['REMOTE_ADDR'];
        $data = date('Y-m-d');
$row = mysql_query("SELECT * FROM tbl_CONTATOS where TXT_ENDIP_CONTT = '$ip'  and DAT_INCLU_CONTT like '%".$data."%' ");
        $count = mysql_num_rows($row);


        if($count != 0){

            header("Location: ../../paginas/contato.php"); exit; 

        }else{

            $TXT_NOMEX_CONTT = $_GET['TXT_NOMEX_CONTT'];
            $TXT_EMAIL_CONTT = $_GET['TXT_EMAIL_CONTT'];
            $TXT_ASSUN_CONTT = $_GET['TXT_ASSUN_CONTT'];
            $MEM_MENSG_CONTT = $_GET['MEM_MENSG_CONTT'];


        $query = "INSERT INTO tbl_CONTATOS (TXT_NOMEX_CONTT, TXT_EMAIL_CONTT, TXT_ASSUN_CONTT, MEM_MENSG_CONTT, DAT_INCLU_CONTT, TXT_ENDIP_CONTT, COD_STATU_ATUAL) VALUES";
    $query .=  "('$TXT_NOMEX_CONTT','$TXT_EMAIL_CONTT','$TXT_ASSUN_CONTT', '$MEM_MENSG_CONTT', now(), '$ip', '0')";

        $inserir = mysql_query($query)
           or die(error());

        mysql_close($conn);

            header("Location: ../../paginas/contato.php"); exit; // Redireciona o visitante
        }

            break;

        case 'verificar':

            $query = mysql_query("SELECT * FROM tbl_CONTATOS WHERE COD_STATU_ATUAL = '0'");

            $total = mysql_num_rows($query);

            echo $total;

            break;
        case 'getnots':
           $query = mysql_query("SELECT COD_IDENT_CONTT, TXT_NOMEX_CONTT, TXT_ASSUN_CONTT, DAT_INCLU_CONTT FROM tbl_CONTATOS ORDER BY COD_IDENT_CONTT DESC
            ");

            $li = '';

            while($linha = mysql_fetch_array($query)){
                $li .= '<li>';
                $li .= '    <a href="#">';
                $li .= '       <div>';
                $li .= '        <input class="vis" value="'.@$linha[COD_IDENT_CONTT].'" type="hidden"/>';
                $li .= '           <strong>'.@$linha[TXT_NOMEX_CONTT].'</strong>';
                $li .= '           <span class="pull-right text-muted">';
                $li .= '               <em>'.date('d/m/Y H:i', strtotime(@$linha[DAT_INCLU_CONTT])).'</em>';
                $li .= '           </span>';
                $li .= '       </div>';
                $li .= '       <div>'.@$linha[TXT_ASSUN_CONTT].'</div>';
                $li .= '   </a>';
                $li .= '</li>';
                $li .= '<li class="divider"></li>';
            }

            echo $li;
        break;

                case 'vis':
            $idnot = $_GET['idnot'];

         echo $idnot;           

            break;


        default:
            echo 'Erro';
            break;
    }

On this page I make a switch, where I request for each input by method GET, the error that is occurring is in case vis:. As you can see, apparently part of the code is missing, however, I am requesting that the message code be displayed in a alert.

How to solve this?

Answer 1

I believe your problem lies in adding the event to an element that does not yet exist in the gift. To solve using pure js, you could put the event in the document and detect what the target was, thus staying:

//[...]

document.addEventListener('click',function(e){
    if(e.target && e.target.id== 'res'){
      var elemento = e.target;

        if(elemento.classList.contains('vis')){
            xhr.get('../includes/request.php?acao=vis&idnot='+elemento.value, function(res){
                alert(res);
            });
        }else{
            alert('nao entro no if');
        }
    }
})

        

Another problem I see is that you’re getting the value of div res with elemento.value, try to use data-value instead, custom attributes should be prefixed by data-. motive here