Keep updating select in the page div without refresh mysql php

Question

Good afternoon,

I have a div that I do a simple select bringing only the amount of database records, and I play the result on an H3 inside that div, all I need is for that div to be automatically updated every 3 minutes, but I don’t have as much knowledge to do it, because I am still a student, who can help me thank.

My code is like this:

<div class="w3-right">
          <?php
             include("connection.php");
             $query = "SELECT registroNovo FROM registros WHERE BLregistros=0 AND Usuario='$usuario'";
             $result_1 = mysqli_query($con, $query);
             $num_notificacoes = mysqli_num_rows($result_1);
           ?>
          <h3><?php if($num_notificacoes != 0){ echo $num_notificacoes;} else {echo '0';}?></h3>
        </div>

Answer 1

You may be making use of AJAX for this. I’ll leave an example with jQuery which is a javascript framework that makes this part easier.

Myfile.php

<?php
    include("connection.php");
    $query = "SELECT registroNovo FROM registros WHERE BLregistros=0 AND Usuario='$usuario'";
    $result_1 = mysqli_query($con, $query);
    $num_notificacoes = mysqli_num_rows($result_1);
    if($num_notificacoes != 0){
        echo $num_notificacoes;
    } else {
        echo '0';
    }

Myfile.php

<div class="w3-right">
  <h3 class="notification-number">-</h3>
</div>

<script>
    var atualizaNotificacao = function (tempoParaChecarNovamenteEmSegundos) {
        $.ajax({
            url: 'MeuArquivo.php',
            type: 'GET',
            beforeSend: function () {
                // loading..
                $('.notification-number').html('-');
            },
            success: function (resultado) {
                $('.notification-number').html(resultado);
                setTimeout(function() { atualizaNotificacao(tempoParaChecarNovamenteEmSegundos); }, tempoParaChecarNovamenteEmSegundos * 1000);
            },
            error: function () {
                $('.notification-number').html('error');
                setTimeout(function() { atualizaNotificacao(tempoParaChecarNovamenteEmSegundos); }, tempoParaChecarNovamenteEmSegundos * 1000);
            }
        });
    }

    // inicializando contador de tempo para atualizacao de 2 segundos...
    atualizaNotificacao(2);
</script>

ATTENTION: I imagine you have jQuery in your application, if you don’t have include the script below before starting the script tag Myfile.php.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>