0

Estou criando uma consulta em PHP em um banco MySQL. Até ai tudo bem. A consulta funciona direitinho. Estou chamando a consulta a partir de um javascript usando $.post('pagina.php',meusparametros,function(resultado){}) para inserir o resultado da pesquisa na minha página html. Até consigo ver o resultado aparecer no html quando faço o teste. O problema é que na seqüência parece que a página dá um "refresh"... aí some tudo. =(

Porém, se eu "printo" o while por exemplo em um alert que seja, ele me mostra o resultado da pesquisa...

arquivo.js

$(function(){    
    $("#btnPesquisa").click(function(){
        var usr = $("#idUsr").val();
        var dti = $("#dtinicio").val();
        var dtf = $("#dtfinal").val();
        if(usr != ""){
            var sDados = {
                usuario : usr,
                dtinicio : dti,
                dtfinal : dtf
            }
            $.post('pesquisa.php',sDados,function(retorno){
                $(".resultado").html(retorno);
            });
        }else{
            $(".resultado").html('');
        }
    });
});

pesquisa.php

require "conexao.php";
require "Usuario.class.php";
try{
    $usr = $_POST['usuario'];
    $dti = $_POST['dtinicio'];
    $dtf = $_POST['dtfinal'];
    $u = new Usuario();
    $sDados = $u->pesquisaAcessos($usr,$dti,$dtf);
    while($result=$sDados->fetch()){
        echo '<li>'.$result['ocorrencia'].'</li>';
    }
}catch(Exception $e){
    echo '<script text="text/javascript"> alert("'.$e->getmessage().'")</script>';
}

pagina.html

    <article class="cam-article">    
        <form class="menu-form" name="pesquisa" id="pesquisa" action="" method="POST">
            <div class="menu-card">
                <div class="menu-div-bar card-group">
                    <input type="text" id="idUsr" name="usuario" placeholder="Digite o nome do usuário">
                </div>
                <div class="menu-div-bar card-group">
                    <input type="date" id="dtinicio" name="dtinicio">
                </div>
                <div class="menu-div-bar card-group">
                    <input type="date" id="dtfinal" name="dtfinal">
                </div>
                <div class="menu-div-bar card-group">
                    <button type="submit" class="menu-btn" name="btnPesquisa" id="btnPesquisa">PESQUISAR</button>
                </div>
            </div>
        </form>
        <article class="cam-article">
            <ul class="resultado">
            </ul>
        </article>
    </article>
2
  • Mostre o código do btnPesquisa, provavelmente ele está enviando o form. 10/06/2020 às 20:19
  • Desculpe-me, editei lá a pergunta, não sei se é assim que faz, sou novo aqui no fórum... tks! 10/06/2020 às 20:33

3 Respostas 3

1

Quando você clica no botão "submit" ele envia o form, então após exectar a função onClick a página é recarregada, uma solução é o preventDefault() seu código js seria:

$("#btnPesquisa").click(function(event){
    event.preventDefault(); // função que impede o envio do form,  evento padrão
    var usr = $("#idUsr").val();
    var dti = $("#dtinicio").val();
    var dtf = $("#dtfinal").val();
    if(usr != ""){
        var sDados = {
            usuario : usr,
            dtinicio : dti,
            dtfinal : dtf
        }
        $.post('pesquisa.php',sDados,function(retorno){
            $(".resultado").html(retorno);
        });
    }else{
        $(".resultado").html('');
    }
});

Outra forma seria simplesmente apagar a tag form do html.

1
  • Obrigado pela ajuda! 10/06/2020 às 23:25
0

o que está acontecendo com o seu código é que você está dando um submit no seu formulário, por padrão o submit faz um redirect para o caminho que está apontado na action do seu formulário. E como a action do seu formulário está vazio por padrão ele redireciona para a própria página. Você resolver isso de duas formas:

Modificar o type do <button>

De:

<button type="submit" class="menu-btn" name="btnPesquisa" id="btnPesquisa">PESQUISAR</button>

Para:

<button type="button" class="menu-btn" name="btnPesquisa" id="btnPesquisa">PESQUISAR</button>

ou você pode adiconar o comando event.preventDefault() na função JS:

$("#btnPesquisa").click(function(event){

    event.preventDefault();

    var usr = $("#idUsr").val();
    var dti = $("#dtinicio").val();
    var dtf = $("#dtfinal").val();
    if(usr != ""){
        var sDados = {
            usuario : usr,
            dtinicio : dti,
            dtfinal : dtf
        }
        $.post('pesquisa.php',sDados,function(retorno){
            $(".resultado").html(retorno);
        });
    }else{
        $(".resultado").html('');
    }
});
1
  • Fabio, obrigado pela ajuda! Alterando o type <button> resolveu mesmo! Obrigado, entretanto o event.preventDefault(); não surtiu efeito. Obrigado mesmo pela ajuda" 10/06/2020 às 23:19
0

O problema é que ao dar click no botão, além da chamada do $.post também é feito o submit do form. No caso como o action é nulo, parece 'sumir tudo'.

Existem 3 formas de resolver isso:

  1. Retirar o type='submit' do botão e retirar o form.

  2. Inserir event.preventDefault(); no javascript como outras respostas citaram.

  3. Setar o action do form para pesquisa.php e manter o type='submit' do botão. Aí não precisa mais de javascript. Os dados já são enviados direto pro php. Mas aí o pesquisa.php precisa retornar uma página HTML válida e não só os resultados.

Edit

Para a oção 3 apenas mude o PHP para:

require "conexao.php";
require "Usuario.class.php";
try{
    $usr = $_POST['usuario'];
    $dti = $_POST['dtinicio'];
    $dtf = $_POST['dtfinal'];
    $sDados = $u->pesquisaAcessos($usr,$dti,$dtf);
    echo "<html><body><ul>";
    while($result=$sDados->fetch()){
        echo '<li>'.$result['ocorrencia'].'</li>';
    }
    echo "</ul></body></html>";
}catch(Exception $e){
    echo '<script text="text/javascript"> alert("'.$e->getmessage().'")</script>';
}

e remova todo o javascript

1
  • Nelson, muito obrigado! pela ajuda, vou pesquisar mais sobre a opção 3 da sua resposta. Se você puder exemplificar, fico grato! Obrigado pelas dicas! 10/06/2020 às 23:23

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .