Questions about dynamic system update of Dashboard

Asked

Viewed 141 times

0

I am creating a task management system and I have a Dashboard that displays the activity updates. The problem is that I can only update this Dashboard when I refresh the page because I am displaying the information with a query in Mysql with PHP.

I would like when I update the status of a task, it be updated in real time, on Dashboard. No need for refresh on the page.

I have already thought of several solutions with AJAX, and even making changes visually in HTML to "fool" the user until he loads the page. But it’s been a lot of work and it seems to me.

Do you have a solution for me? I’m depending on it a lot.

See below the Dashboard image and the task list.

inserir a descrição da imagem aqui

Below is the code I use to fill out the Dashboard. 

<div class="row " id="row-resultados-dashboard">
				
				<div class=" col-sm-12 col-sm-offset-0  col-md-10 col-md-offset-1 col-lg-12 col-lg-offset-0" id="resultados-dashboard">
					
					<div class="col-xs-6 col-sm-4 col-lg-2 .relatorios dashboardhover" id="resultados-pendentes">
						<p>Tarefas do mês</p>
						
						<?php
							while($linha_pendentes = mysqli_fetch_assoc($lista_pendentes))
							{
						?>	
							<h1>	
								<?php echo $linha_pendentes['count(codigo)']; ?>
							</h1>

						<?php
							}
						?>
							
					</div>
					
					<div class="col-xs-6 col-sm-4  col-lg-2 .relatorios dashboardhover" id="resultados-iniciados">
						<p>Fazendo</p>
						<?php
							while($linha_iniciados = mysqli_fetch_assoc($lista_iniciados))
							{
						?>	
							<h1>	
								<?php echo $linha_iniciados['count(codigo)']; ?>
							</h1>

						<?php
							}
						?>
				
					</div>
					
					<div class="col-xs-6 col-sm-4  col-lg-2 .relatorios dashboardhover" id="resultados-iniciados-vencidos">
						<p>Fazendo fora do prazo</p>
						<?php
							while($linha_iniciados_vencidos = mysqli_fetch_assoc($lista_iniciados_vencidos))
							{
						?>	
							<h1>	
								<?php echo $linha_iniciados_vencidos['count(codigo)']; ?>
							</h1>

						<?php
							}
						?>
						
					</div>
					
					<div class="col-xs-6 col-sm-4  col-lg-2 .relatorios dashboardhover" id="resultados-vencidos">
						<p>Fora do prazo</p>
						<?php
							while($linha_vencidos = mysqli_fetch_assoc($lista_vencidos))
							{
						?>	
							<h1>	
								<?php echo $linha_vencidos['count(codigo)']; ?>
							</h1>

						<?php
							}
						?>
				
					</div>
					
					<div class="col-xs-6 col-sm-4  col-lg-2 .relatorios dashboardhover " id="resultados-concluidos">
						<p>Feito no mês</p>
						<?php
							while($linha_concluidos = mysqli_fetch_assoc($lista_concluidos))
							{
						?>	
							<h1>	
								<?php echo $linha_concluidos['count(codigo)']; ?>
							</h1>

						<?php
							}
						?>
						
					</div>
					
					<div class="col-xs-6 col-sm-4  col-lg-2 .relatorios dashboardhover" id="resultados-concluidos-vencidos">
						<p>Feito fora do prazo</p>
						<?php
							while($linha_concluidos_vencidos = mysqli_fetch_assoc($lista_concluidos_vencidos))
							{
						?>	
							<h1>	
								<?php echo $linha_concluidos_vencidos['count(codigo)']; ?>
							</h1>

						<?php
							}
						?>
						
					</div>
					
				</div>

Thank you!

php jquery mysql ajax

1 answer

1


Update without refresh I usually use Ajax with val attribute replacement in html fields in tags:

To do this we will create a PHP page that returns the results in JSON:

get_results.php:

ps: I don’t know how this your table so I based only on your code. To improve this type of search the ideal is that you run a Count with group by to return all counts in a single query avoiding excess requests to the bank:

<?php

//TAREFAS DO MÊS
while($linha_pendentes = mysqli_fetch_assoc($lista_pendentes)){
    $mes = $linha_pendentes['count(codigo)'];
}

//Fazendo
while($lista_iniciados = mysqli_fetch_assoc($lista_iniciados)){
    $iniciados = $linha_iniciados['count(codigo)'];
}

//Fazendo fora do prazo
while($linha_iniciados_vencidos = mysqli_fetch_assoc($lista_iniciados_vencidos)){
    $fazendo_vencidos = $linha_iniciados_vencidos['count(codigo)'];
}

//Fora do prazo
while($linha_vencidos = mysqli_fetch_assoc($lista_vencidos)){
    $vencidos = $linha_vencidos['count(codigo)'];
}

//Feito no mês
while($linha_concluidos = mysqli_fetch_assoc($lista_concluidos)){
    $ok_mes = $linha_concluidos['count(codigo)'];
}

//Feito fora do prazo
while($linha_concluidos_vencidos = mysqli_fetch_assoc($lista_concluidos_vencidos)){
    $ok_vencidos = $linha_concluidos_vencidos['count(codigo)'];
}

//Aqui construimos o retorno em json

$json_arr = array(
    'mes' => $mes,
    'iniciados' => $iniciados,
    'fazendo_vencidos' => $fazendo_vencidos,
    'vencidos'=> $vencidos,
    'ok_mes' => $ok_mes
    'ok_vencidos' => $ok_vencidos
);

//retornamos em formato json

echo json_encode($json_arr);

Now on your page, we have to create a function to capture that data and modify your H1 headers. For this, I removed all php and added identifiers to your "H1":

index php.:

<div class="row " id="row-resultados-dashboard">

<div class=" col-sm-12 col-sm-offset-0  col-md-10 col-md-offset-1 col-lg-12 col-lg-offset-0" id="resultados-dashboard">

    <div class="col-xs-6 col-sm-4 col-lg-2 .relatorios dashboardhover" id="resultados-pendentes">
        <p>Tarefas do mês</p>

            <h1 id="mes">   
            </h1>

    </div>

    <div class="col-xs-6 col-sm-4  col-lg-2 .relatorios dashboardhover" id="resultados-iniciados">
        <p>Fazendo</p>

            <h1 id="iniciados"> 
            </h1>

    </div>

    <div class="col-xs-6 col-sm-4  col-lg-2 .relatorios dashboardhover" id="resultados-iniciados-vencidos">
        <p>Fazendo fora do prazo</p>

            <h1 id="fazendo_vencidos">  
            </h1>

    </div>

    <div class="col-xs-6 col-sm-4  col-lg-2 .relatorios dashboardhover" id="resultados-vencidos">
        <p>Fora do prazo</p>

            <h1 id="vencidos">  
            </h1>


    </div>

    <div class="col-xs-6 col-sm-4  col-lg-2 .relatorios dashboardhover " id="resultados-concluidos">
        <p>Feito no mês</p>

            <h1 id="ok_mes">    
            </h1>


        ?>

    </div>

    <div class="col-xs-6 col-sm-4  col-lg-2 .relatorios dashboardhover" id="resultados-concluidos-vencidos">
        <p>Feito fora do prazo</p>

            <h1 id="ok_vencidos">   
            </h1>


    </div>

</div>

Still in your index.php we will add a jQuery function that will run every 15 seconds, updating the Dashboard data:

<script>
    function update_dashboard(){

        $.ajax({

            url : "get_results.php", //pagina que retornará as contagens,
            type: "GET", // usaremos verbo GET pois não há necessidade de enviar dados
            dataType: "json", //retorno esperado em json
            success: function(object){

                //aqui atualizamos os seus H1 com os novos resultados:
                $("#mes").html(object.mes);
                $("#iniciados").html(object.iniciados);
                $("#fazendo_vencidos").html(object.fazendo_vencidos);
                $("#vencidos").html(object.vencidos);
                $("#ok_mes").html(object.ok_mes);
                $("#ok_vencidos").html(object.ok_vencidos);

            },
            error: function(){
                console.log("Erro ao atualizar");
            }

        });

    }

//para carregar os dados, executo a função ao carregar da página
update_dashboard();

//e aqui repitimos a cada 15 segundos pra não criar muitas requisições em menos de 1 min.
setInterval(function(){update_dashboard();}, 15*1000);


</script>

  • Will, your suggestion was valid. But my intention would be that Dashboard be updated according to user interaction. For example: "If it changes the status of a task, Dashboard changes in real time".

  • then you can decrease the amount of checks in the function... instead of 15 seconds, you can reduce the time, check 1 in 1 second... but I don’t recommend loading the request server like this. Maybe every 3 seconds... the case is that you need to let him read something so he knows when to update, be it a text file or some column of the database...

  • I agree, Will. But my need would be to update only when the user changes the status of the task. I would not like a function to be rolling in the setInterval. But thanks anyway.

  • Will, if I use this function to run the Cade 1 second, it will not generate huge processing on the system ?

  • ... But still your answer was very helpful to me, Will. Thank you!

  • 1

    Thiago , if you put every 1s will peak on the server yes... ideal is that this process is a little more reduced, I usually give a range of 5 or 10s

  • What things are our orders

Show 2 more comments

Browser other questions tagged php jquery mysql ajax

You are not signed in. Login or sign up in order to post.