2

Bom dia Galera,

Tenho em minha home , um campo para consultar CPF. O campo tem apenas um campo texto , onde informo o CPF, se encontrar algum cpf no banco , ele me retorna alguns dados.Eu submeto o formulario com ajax , para nao recarregar a pagina , na pagina que faz a consulta , eu jogo os dados em um array e o converto para json , recupero o valor na minha home e imprimo eles.

A div que mostrara os dados , eu a deixo oculta: <style>style:display:none;</style> Quando eu pressiono o botao para pesquisar , ele exibe uma tabela com os dados :

    <script>
$("#btnConsulta").click
    (
        function()
            {
                var show =  $("#divForm").css("display","block");
            }
    );
</script>

ate ai blz. Mas eu gostaria que a div com essa tabela fosse ocultada novamente ,apos x segundos.

fix o codigo :

function hideDiv()
            {
                $("#divForm").css("display","none");
            }

E usei o setInterval para executar ele após x segundos. Mas se eu defino que ira chamar a funçao de esconder em 10 segundos , se eu entrar na pagina , esperar 5 segundos e pesquisar , a minha div so ficara visivel por mais 5 .

Eu gostaria que o setInterval começasse a contar após eu pressionar o botao de pesquisar.

EDIT :----------

Codigo que uso para submeter o formulario e pegar os dados.

<script type="text/javascript">
    function consultaCpf()
    {
        jQuery(document).ready(function(){
        jQuery('#form1').submit(
        function(){
            var dados = jQuery( this ).serialize();
            jQuery.ajax
                (
                    {
                        type: "POST",
                        url: "/admin2/inc/ajaxSubmit/consultaCpf.php",
                        data: dados,
                        dataType: "json",
                        success: function(json)
                        {
                            $('#nomeVendedor').html( json.vendedor);
                            $('#nomeCliente').html( json.cliente );
                            $('#cpfCliente').html( json.cpf );
                        }
                    }
                );

                return false;
            });
        });
    }

consultaCpf();
</script>

Aqui ele manda o formulario para a pagina consultaCpf.php.

Na pagina consultaCpf.php :

$return = array();
$cpf = $_POST['txtCpf'];

$sql = mysql_query("SELECT vendedor,nomeCliente,cpf
 FROM tblVenda where cpf = '$cpf' ");

    while($row = mysql_fetch_array($sql))
      { 
            $vendedor = $row['vendedor'];
            $cliente = $row['nomeCliente'];
            $cpf2 = $row['cpf'];
      }
$return['vendedor'] = $vendedor;
$return['cliente'] = $cliente;
$return['cpf'] = $cpf2;

echo json_encode($return);

Desde ja , grato

2 Respostas 2

4

Quem vai te ajudar aqui é o setTimeout. De maneira simples, você pode fazer:

$("#btnConsulta").on('click', function(){
    setTimeout(function(){
        $("#divForm").css("display","none");
    }, 5000);  
}); 

Basicamente, a #divForm vai sumir 5 segundos depois que #btnConsulta for clicado.

EDIT:

Demorei um pouco pra entender o seu objetivo mas, depois da conversa nos comentários, cheguei lá. O código final fica:

$("#btnConsulta").on('click', function(){
    $("#divForm").css("display","block");
    setTimeout(function(){
        $("#divForm").css("display","none");
    }, 5000);  
});

Vale lembrar que, inicialmente, #divForm deve ter display:none. Ao clicar em #btnConsulta, #divForm é imediatamente mostrada, e escondida novamente após 5 segundos.

EDIT ²:

Como mencionado pelo @ctgPi, essa solução é bugada. Caso o usuário seja bem loco e clique no botão várias vezes, o timing para de funcionar. Um workaround nesse caso seria esconder o botão durante os mesmos 5 segundos que #divForm aparece, mas isso talvez não seja tão eficiente.

11
3

Eu acho que você quer algo nessa linha aqui:

updateDiv = (function () {
    var currentTimeout = null;
    var myDiv = document.getElementById('myDiv');
    return function (divContent) {
        myDiv.textContent = divContent;
        if (currentTimeout !== null) {
            clearTimeout(currentTimeout); }
        currentTimeout = setTimeout(function () {
            currentTimeout = null;
            hideDiv();
        }, 10000);
    };
})();

Aí você usaria updateDiv como o callback do seu AJAX: não só eu disparo o setTimeout só quando a resposta volta (evitando o problema que você mencionou), mas se o usuário fizer outra consulta nesse intervalo de 10 segundos, eu cancelo o timeout anterior (se você não fizer isso, a segunda consulta vai ser ser fechada 10 segundos depois da primeira consulta).


Editado: no código que você colocou: você declararia uma variável global logo depois de abrir o <script>:

<script type="text/javascript">
    var currentTimeout = null;
    function consultaCpf()
    {
        …

…e no jQuery.ajax você faria

success: function(json)
{
    $('#nomeVendedor').html( json.vendedor);
    $('#nomeCliente').html( json.cliente );
    $('#cpfCliente').html( json.cpf );
    if (currentTimeout !== null) {
        clearTimeout(currentTimeout); }
    currentTimeout = setTimeout(function () {
        currentTimeout = null;
        hideDiv();
    }, 10000);
}
3
  • Bom dia ctgPi , como assim usa-la como call back ? Poderia dar um exemplo de como ficaria ? Grato 12/06/2015 às 13:09
  • Como você está fazendo o AJAX? Na unha, com jQuery? Edita a sua pergunta pra colocar o javascript que dispara o AJAX pra eu poder dar o exemplo.
    – user25930
    12/06/2015 às 13:10
  • Entendi . Testei e funcionou. Vlw 12/06/2015 às 13:32

Você deve fazer log-in para responder a esta pergunta.

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