DELETE specific row of a table with PHP and AJAX

1

Hello! I have the following problem: An address book that one of the options is to EXCLUDE a contact. It displayed a TABLE with the contacts, when clicking on 'search'. In each row of the table there is a "Delete" button. However, when I click this button, only the first row of the table is deleted and not the row I chose to delete. Here is an example:

Code in php to search for a contact:

if (isset($_GET["txtnome"])) 
{
    $nome = $_GET["txtnome"];


    // Conexao com o banco de dados
    $host = "127.0.0.1";
    $port = "5432";
    $db = "agenda";
    $user = "postgres";
    $pass = "postgres";

    $conexao = new PDO("pgsql:host=$host;dbname=$db;user=$user;password=$pass") or die("Erro na conexão!");


    // Verifica se a variável está vazia
    if (empty($nome)) {
        $sql = "SELECT * FROM contato";
    } else {
        $nome .= "%";
        $sql = "SELECT * FROM contato WHERE nome like '$nome'";
    }
    sleep(1);
    $result = $conexao->query($sql) or die("Erro na consulta!");
    $contact = $result->fetchAll();

    // Verifica se a consulta retornou linhas 
    if (!empty($contact)) {
        // Atribui o código HTML para montar uma tabela
        $tabela = 
        "
        <div class='row'>
        <div class='col-md-6'>

        <table border='1' class='table table-bordered table-hover table-striped'>
                    <thead class='bg-info'>
                        <tr>
                            <th>NOME</th>
                            <th>TELEFONE</th>
                            <th>CELULAR</th>
                            <th>EMAIL</th>
                            <th>ID</th>
                            <th>OPÇÃO</th>
                        </tr>
                    </thead>
                    <tbody>
                    <tr id='hidden'>";
        $return = "$tabela";

        // Captura os dados da consulta e insere na tabela HTML

        foreach ($contact as $row) {
            $return.= "<td>" . utf8_encode($row["nome"]) . "</td>";
            $return.= "<td>" . utf8_encode($row["telefone"]) . "</td>";
            $return.= "<td>" . utf8_encode($row["celular"]) . "</td>";
            $return.= "<td>" . utf8_encode($row["email"]) . "</td>";
            $return.= "<td id='deletar'>" . utf8_encode($row["id"]) . "</td>";
            $return.= "<td>" . "<input type='button' class='btn btn-danger btn-sm' value='Excluir' onclick='excluir();'/>" . "</td>";
            $return.= "</tr>";
        }
        echo $return.="</tbody></table></div></div>";
    } else {
        // Se a consulta não retornar nenhum valor, exibe mensagem para o usuário
        echo "Não foram encontrados registros!";
    }
}

Function JavaScript to delete table row:

function excluir(){

    swal({
      title: 'Tem certeza que deseja excluir este contato?',
      text: "Você não poderá reverter isso!",
      type: 'warning',
      showCancelButton: true,
      confirmButtonColor: '#3085d6',
      cancelButtonColor: '#d33',
      confirmButtonText: 'Sim, exclua!'
    }).then((result) => {
      if (result.value) {

        var elemento = document.getElementById("deletar").innerHTML;
        document.getElementById("deletar").value = elemento;

        var id = document.getElementById("deletar").value;
        var resultado = document.getElementById("result");

        var xmlreq = CriaRequest();

        xmlreq.open("GET", "contato.php?deletar=" + id, true);

        // Atribui uma função para ser executada sempre que houver uma mudança de ado
        xmlreq.onreadystatechange = function(){

        // Verifica se foi concluído com sucesso e a conexão fechada (readyState=4)
        if (xmlreq.readyState == 4) {
            // Verifica se o arquivo foi encontrado com sucesso
            if (xmlreq.status == 200) {
                resultado.innerHTML = xmlreq.responseText;
                document.getElementById("hidden").style.display = "none";
                swal(
                  'Deleted!',
                  'Your file has been deleted.',
                  'success'
                )

            }else{
                resultado.innerHTML = "Erro: " + xmlreq.statusText;
            }
        }
    };
    xmlreq.send(null);
      } //if do result.value
    }) //swal principal
} //funcao excluir

Code in php to delete the DB contact:

if (isset($_GET["deletar"])) {

    $id = $_GET["deletar"];

    // Conexao com o banco de dados
     $host = "127.0.0.1";
     $port = "5432";
     $db = "agenda";
     $user = "postgres";
     $pass = "postgres";

     $conexao = new PDO("pgsql:host=$host;dbname=$db;user=$user;password=$pass") or die("Erro na conexão!");

     $result = $conexao->prepare("DELETE FROM contato WHERE id = :deletar");
     $result->bindValue(':deletar', $id);

     sleep(1);

     if (!($result->execute())) {
         echo "Erro ao excluir contato :(";
     }
}
    
asked by anonymous 07.12.2018 / 02:16

1 answer

1
  

However, when I click this button, only the first row of the table is deleted, not the row I chose to delete.

Your page is having multiple elements with the same id . Therefore, its excluir() function will get the id of the first found element.

1) Correct the part that "passes" the id to be deleted. Notice the comments.

foreach ($contact as $row) {

    // ...

    // Por estar dentro de um foreach, vários elementos receberão o mesmo id "deletar"...
    // $return.= "<td id='deletar'>" . utf8_encode($row["id"]) . "</td>";
    $return.= "<td>" . utf8_encode($row["id"]) . "</td>";
    // Então, vamos passar o ID como parâmetro para a função excluir()! Veja:
    $return.= "<td>" . "<input type='button' class='btn btn-danger btn-sm' value='Excluir' onclick='excluir(".utf8_encode($row["id"]).");'/>" . "</td>";
    $return.= "</tr>";
}

2) Correct the excluir() function:

function excluir(id){ // Agora vai recebe o ID como parâmetro

    // ...

        // Comentar aqui pra não sobrescrever a variável id:
        //var id = document.getElementById("deletar").value;

    // ...

}

Now it should work ... Note that the rest of the code remains the same. I just posted the part that interests you to correct ...

    
07.12.2018 / 03:04