Uncaught TypeError: Can not read property 'toLowerCase' of undefined

0

I try to get the values from a table and filter them, but for some reason the values are undefined and I have no idea how to solve them.

<?php

include_once("conexao.php");

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

    $id = $_GET["id"];

    $sql = "SELECT * FROM acesso WHERE id = ?";

    $stmt = $conexao->prepare($sql);
    $stmt->bindParam(1, $id);
    $stmt->execute();

    if($obj = $stmt->fetch(PDO::FETCH_OBJ)){
        $marca = $obj->marca;
        $modelo = $obj->modelo;
        $cor = $obj->cor;
    }

} else {
    $id=0;
    $marca="";
    $modelo="";
    $cor="";
}

?>

<html>
<head>
    <title>PHP</title>
    <meta charset="utf-8"/>
    <link href="css/bootstrap.css" rel="stylesheet"/>
    <script src="js/jquery-3.3.1.js"></script>
    <script src="js/bootstrap.js"></script>
</head>
<body style="background-color: #191919; color: white;">
    <div class="container">
        <form onsubmit="return validar();" action="bemvindo.php" method="POST" ">
            <fieldset>
                <legend>Formulário</legend>
                <div class="form-group">
                    <label for="marca">Marca: </label>
                    <input type="text" name="marca" id="marca" placeholder="Exemplo: Toyota" value="<?=$marca?>" class="form-control"/>
                </div>

                <div class="form-group">
                    <label for="modelo">Modelo: </label>
                    <input type="text" name="modelo" id="modelo" placeholder="Exemplo: Golf 2016" value="<?=$modelo?>" class="form-control"/>
                </div>

                <div class="form-group">
                    <label for="cor"">Cor: </label>
                    <input type="text" name="cor" id="cor" placeholder="Exemplo: Preto" value="<?=$cor?>" class="form-control"/>
                </div>
                <!-- Marca, Modelo, Cor -->
                <div class="form-group">
                    <input type="hidden" name="id" value="<?=$id?>"/>
                    <button type="submit" class="btn btn-dark">Enviar</button>
                </div>
            </fieldset>
        </form>
        <legend>Carros:</legend>
        <div class="form-group">
            <input type="text" id="pesquisar" name="pesquisar" placeholder="Pesquisar" class="form-control"/>
        </div>
        <table class=" table table-dark" id="tabelaCarros">
            <thead>
                <tr>
                    <th>Marca</th>
                    <th>Modelo</th>
                    <th>Cor</th>
                    <th>Editar</th>
                    <th>Excluir</th>
                </tr>
            </thead>
            <tbody>        


                <?php

                    $sql = "SELECT * FROM acesso";

                    $stmt = $conexao->prepare($sql);
                    $stmt->execute();

                    while ($obj = $stmt->fetch(PDO::FETCH_OBJ)) {

                ?>
                    <tr>
                        <td><?=$obj->marca?></td>
                        <td><?=$obj->modelo?></td>
                        <td><?=$obj->cor?></td>
                        <td>
                            <a href="index.php?id=<?=$obj->id?>">
                                Editar
                            </a>
                        </td>
                        <td>
                            <a href="excluir.php?id=<?=$obj->id?>
                            "onclick="return confirm('Deseja realmente excluir?');">
                                Excluir
                            </a>
                        </td>
                    </tr>
                <?php

                    }

                ?>
            </tbody>
        </table>
    </div>
</body>

<script>
    $("#pesquisar").keyup(function() {
        var pesquisar = $(this).val().toLowerCase();

        $("#tabelaCarros tbody tr").each(function() {

            data = $(this).data("pesquisar").toLowerCase();

            if(data.includes(pesquisar)) {
                $(this).show();
            } else {
                $(this).hide();
            }
        })
    });

    function validar(){
        if($("#marca").val() == ""){
            alert("Marca não preenchida. Preencha todos os campos.");
            return false;
        }
        if($("#modelo").val() == ""){
            alert("Modelo não preenchido. Preencha todos os campos.");
            return false;
        }
        if($("#cor").val() == ""){
            alert("Cor não preenchida. Preencha todos os campos.");
            return false;
        }
    }
</script>

    
asked by anonymous 09.11.2018 / 15:46

1 answer

1

Are you checking first if $(this).data("pesquisar") is returning some value and not undefined ? In your table I do not see and "data-search" attribute set, it will give error.

Trying to use toLowerCase() in a value null or undefined gives error, simulated its error below:

$("#pesquisar").keyup(function() {
   console.log('valor = "' + $(this).val() + '"');
   var pesquisar = $(this).val().toLowerCase();
   console.log(pesquisar);
   
   $("#tabelaCarros tbody tr").each(function() {
        var d = $(this).data("pesquisar");
  
        if (d == undefined)
           console.log("d=undefined, vai dar erro");
        else {
           data = $(this).data("pesquisar").toLowerCase();
           console.log("data=" + data);
        }
    });
 });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><p><inputtype="text" id="pesquisar"/>
</p>
<table class=" table table-dark" id="tabelaCarros">
            <thead>
                <tr>
                    <th>Marca</th>
                    <th>Modelo</th>
                    <th>Cor</th>
                    <th>Editar</th>
                    <th>Excluir</th>
                </tr>
            </thead>
            <tbody>        
                    <tr>
                        <td>Marca 1</td>
                        <td>Modelo X></td>
                        <td>Branco</td>
                        <td>
                            <a href="index.php?id=<?=$obj->id?>">
                                Editar
                            </a>
                        </td>
                        <td>
                            <a href="excluir.php?id=<?=$obj->id?>
                            "onclick="return confirm('Deseja realmente excluir?');">
                                Excluir
                            </a>
                        </td>
                    </tr>
                    <tr data-pesquisar="sim">
                        <td>Marca 1</td>
                        <td>Modelo X></td>
                        <td>Branco</td>
                        <td>
                            <a href="index.php?id=<?=$obj->id?>">
                                Editar
                            </a>
                        </td>
                        <td>
                            <a href="excluir.php?id=<?=$obj->id?>
                            "onclick="return confirm('Deseja realmente excluir?');">
                                Excluir
                            </a>
                        </td>
                    </tr>
                
            </tbody>
        </table>

Note that in the second tr I added the attribute "date-search" and it does not give error.

    
09.11.2018 / 16:04