Hide Div after x seconds after performing action

Question

Hide Div after x seconds after performing action

Navigation

#1 by (4 votes)
#2 by (3 votes)

2

Good morning, people,

I have in my home a field to consult CPF. The field has only a text field, where I inform the CPF, if I find any cpf in the database, it returns some data to me. I submit the form with ajax, not to reload the page, in the page that makes the query, I play the data in an array and convert it to json, I retrieve the value in my home and print them.

The div that showed the data, I leave it hidden: <style>style:display:none;</style> When I press the button to search, it displays a table with the data:

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

Ai blz. But I would like the div with this table to be hidden again, after x seconds.

fix the code:

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

And I used setInterval to run it after x seconds. But if I define that I will call the hiding function in 10 seconds, if I enter the page, wait 5 seconds and search, my div will only be visible for 5 more.

I would like setInterval to start counting after I press the search button.

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

Code that I use to submit the form and get the data.

<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>

Here he sends the form to the query pagePpf.php.

In the queryPpf.php page:

$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);

Ha ha, grateful

php javascript html jquery ajax

asked by anonymous 12.06.2015 / 14:49

2 answers

4

Who will help you here is setTimeout . In a simple way, you can do:

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

Basically, #divForm will disappear 5 seconds after #btnConsulta is clicked.

EDIT:

It took me a while to understand your goal, but after the conversation in the comments, I got there. The final code is:

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

Remember that, initially, #divForm must have display:none . When you click #btnConsulta , #divForm is immediately displayed, and hidden again after 5 seconds.

EDIT ²:

As mentioned by @ctgPi, this solution is bugged. If the user is very crazy and clicks the button several times, timing stops working. A workaround in this case would hide the button for the same 5 seconds that #divForm appears, but this may not be as efficient.

12.06.2015 / 14:57

Display inline does not work Integrate a jQuery plugin into a WordPress theme

score 3 · Accepted Answer

I think you want something along these lines here:

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);
    };
})();

Then you would use updateDiv as your AJAX callback: not only do I fire setTimeout only when the answer comes back (avoiding the problem you mentioned), but if the user does another query within that 10-second interval , I cancel the previous timeout (if you do not, the second query will be closed 10 seconds after the first query).

Edited: in the code you put in: you would declare a global variable shortly after opening <script> :

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

... and no jQuery.ajax would you do

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);
}