Exibir Loader em Consulta ao Banco

[Thiago Braddock 0]

Boa noite Galera tudo bem?

 

Após horas buscando sem sucesso no google e no bing venho apelar para vossa sabedoria.

 

Quero fazer uma coisa bem básica, um loader(gif) ao clicar no botão responsável por fazer uma consulta num banco.

 

Vi centenas de casos parecidos no fórum mas nada simples e funcional.

 

Como ex. criei um banco e uma tabela de contatos. Ao dar o select no banco esse retorno esta demorado e gostaria de colocar tal gif enquanto a consulta é processada.

 

Vi até um usuário do forum aqui que logo após o select deu um

echo '<div><img src='loader.gif'></div>; '

 

Mas como tratar para que o gif pare de ser mostrado quando a consulta for bem sucedida ?

 

Sei que deve ser feito com auxilio de ajax/ jquery. Porém realmente não encontrei nada esclarecedor.

 

Alguém pode ajudar nisso?

[FreitasMT 29]

bom.........

 

 

 

eu acredito que dar um echo não seria a solução por um motivo simples:

 

quando você da o echo pelo php esse echo só vai aparecer quando o servidor responder totalmente ou seja quando a imagem aparecer o sql já vai ter tido terminado de executar..

 

nesse caso a melhor forma seria usar ajax

[Thiago Braddock 0]

Sim Freitas, entendo que a melhor forma realmente é o AJAX.

 

O Problema é como encaixar isso em meio ao php, em que momento testar se o botão foi clicado, dei uma olhada na biblioteca load, ainda não cheguei lá, estou tentando entender a logica do negocio, já que não sei nada de ajax.

 

Postei aqui para ver se alguém tem uma luz de como fazer tal coisa, tenho exemplos mas não no select com botão.

[FreitasMT 29]

Bom..

 

eu acho que isso basicamente resolveria seu problema

 

https://drive.google.com/file/d/0BwBEh4QJvkXjVFJtdkxRVzdFZ1k/edit?usp=sharing

 

lembrando que como esse codigo usa ajax você tem que executá-lo em um servidor HTTP como apache ou seja, roda no wampserver, easyPHP em localhost.

[ESerra 744]

bom.........

 

 

 

eu acredito que dar um echo não seria a solução por um motivo simples:

 

quando você da o echo pelo php esse echo só vai aparecer quando o servidor responder totalmente ou seja quando a imagem aparecer o sql já vai ter tido terminado de executar..

 

nesse caso a melhor forma seria usar ajax

 

Na realidade existem maneiras de receber pedaços da execução antes dela finalizar, você consegue isso jogando com flush e ob_end_flush... contudo também concordo que ajax é o modo mais simples de resolver isto.

[FreitasMT 29]

Na realidade existem maneiras de receber pedaços da execução antes dela finalizar, você consegue isso jogando com flush e ob_end_flush... contudo também concordo que ajax é o modo mais simples de resolver isto.

 

Legal....

 

Disso eu não sabia

 

quem sabe um dia isso salve minha vida. :)

[Thiago Braddock 0]

Não, do jeito que você enviou é delimitado um "delay" para aparecer o carregamento, pelo que vi o loader antecede o resultado da query, independente do tempo de 2, 10 seg ...

 

Ainda não é isso, mas obrigado, vou continuar procurando.

 

"flush e ob_end_flush" vou procurar sobre isso tbm ...

[FreitasMT 29]

Bom isso é estranho...

 

talvez por ser uma consulta sql o php a "deixe pra depois" e responda o request e assim o ajax termina antes da query ser executada.

 

bom até então nunca tinha visto isso.

 

quem sabe o metodo do ESerra funcione então

[santos_s 12]

Cara eu utilizo assim e atende minha necessidade;

 

<!--Função Loader--> 
function showCarga()
               {
            document.getElementById('carga').style.display="block";
                }
        function hideCarga()
        {
            document.getElementById('carga').style.display="none";
        }            
  <!--css-->
.loading{
            display: none;
            background: #FFFFFF;
            position: absolute;
            width: 200;
            height: 100;
            top: 250;
            left: 540;
            border-style: solid;
            border-color: black;
            border-width: 1;
            text-align: center;
            /**text-transform: uppercase;*/
            font-family:Arial, Helvetica, sans-serif
            font-weight: bold;
            color: silver;
            z-index: 3;
            }
        .imgloading{padding-top: 15;font-family: arial;height: 130;
        }

<body onLoad="java script:hideCarga();">
      <div class="loading" id="carga">
          <img class="imgloading" src="img/ajax-loader.gif" style="height:15; width:140">
        <br/><br/>Executando Comando ...
    </div>

Chamo a a função(ShowCarga)quando realizo a consulta e oculta no final(HideCarga).

 

 

Abraço.

[Thiago Braddock 0]

Certo Santos_S, vou tentar, muito obrigado.

 

Então chamo a função antes do select e dou o hide antes de mostrar(echo) os resultados certo?

 

E nesse seu exemplo é script puro não vou precisar importar nenhum biblioteca a mais, interessante, vou tentar.

 

Muito Obrigado

[santos_s 12]

Certo Santos_S, vou tentar, muito obrigado.

 

Então chamo a função antes do select e dou o hide antes de mostrar(echo) os resultados certo?

 

E nesse seu exemplo é script puro não vou precisar importar nenhum biblioteca a mais, interessante, vou tentar.

 

Muito Obrigado

 

Voce pode chamar a função no evento de seu elemento, ou no inicio da consulta, e dar um hide abaixo da ultima linha da consulta.

não é preciso importar nenhuma biblioteca.

 

 

Abraço.

[Thiago Braddock 0]

Boa noite a todos. Bom consegui fazer um exemplo em 1 única pagina com o código passado pelo amigo santos_s. Porém agora não consigo encaixar nesse outro exemplo com 2 páginas. Alguém pode dar uma olhada?

 

agenda.php

 

<?php
$activeAgenda = 'active';
$title = 'Agenda 1.1 | Etec Pinhal 2013';
include ("template/header.php");
?>
  
<h1>Agenda</h1>
<ul>
 <li><p><a href="agenda.php?page=cadastra-cidade">Cadastrar Cidade</a></p></li>
 <li><p><a href="agenda.php?page=cadastra-contato">Cadastrar Contato</a></p></li>
 <li><p><a href="agenda.php?page=lista-contatos">Listar Contatos</a></p></li>
 <li><p><a href="agenda.php?page=localizar-contato">Localizar Contato</a></p></li>

</ul>
<?php
 
 $page = @$_GET['page'];
 if (isset($page))
 {
	$path = 'agenda/'.$page.'.php';	 
	
	if (file_exists($path))
	{
		include('agenda/'.$page.'.php');	 
	}
	else
	{
		echo 'Desculpe mas a pagina nao pode ser exibida';
	}
 }
 else
 {
	 
 }
 
 ?>
<?php
include ("template/footer.php");
?>

Quando clicar no link LISTAR CONTATOS a seguinte página será chamada:

 

<style type="text/css">
.tabela:hover{background-color:#CCC; }
.tabela{font-size:14px}

.loading{
            display: none;
            background: #FFFFFF;
            position: absolute;
           top: 250;
            left: 540;
            text-align: center;
            /**text-transform: uppercase;*/
            font-family:Arial, Helvetica, sans-serif
            font-weight: bold;
            color: silver;
            z-index: 3;
            }
        .imgloading{padding-top: 15;font-family: arial;
        }
</style>
 <script type="text/javascript">
function showCarga()
               {
            document.getElementById('carga').style.display="block";
                }
        function hideCarga()
        {
            document.getElementById('carga').style.display="none";
        } 
   
   </script>
            <body onload="showCarga();">     
<h2>LISTA COMPLETA DE CONTATOS</h2>
<div class="loading" id="carga">
<img class="imgloading" src="imagens/loading.gif">
</div>
   
<table width="100%" border="1" bordercolor="#000000" cellpadding="5" cellspacing="0" >
<tr style="background-color:#F90; font-weight:bold; font-size:16px">
<td width="50">ID</td>
<td>Nome</td>
<td>Data Nascimento</td>
<td>Telefone</td>
<td>Celular</td>
<td>E-Mail</td>
<td>Endereço</td>
<td>Cidade</td>
</tr>
<?php
 include "config/conexao.php";
 $sql = mysql_query("select date_format(contato.data_nasc, '%d/%m/%Y' ) as nascimento , contato.cod_contato, contato.nome_contato, cidade.nome_cidade, cidade.cod_cidade, contato.telefone, contato.celular, contato.email, contato.endereco from contato,cidade where contato.cod_cidade = cidade.cod_cidade;");
?>

<script language="javascript" type="text/javascript">
hideCarga();
</script>

<?php
 while (($registro = mysql_fetch_array($sql))){
  echo "<tr class='tabela'><td>". $registro['cod_contato'] . '</td>';
  echo "<td>". $registro['nome_contato'] . '</td>';
  echo "<td>". $registro['nascimento'] . '</td>';
  echo "<td>". $registro['telefone'] . '</td>';
  echo "<td>". $registro['celular'] . '</td>';
  echo "<td>". $registro['email'] . '</td>';
  echo "<td>". $registro['endereco'] . '</td>';
  echo "<td>". $registro['nome_cidade'] . '</td></tr>';
 
 }
?>
</table>

 

Eu estou usando o cabeçalho e o footer com import, por isso não estão definidas as tags no código, apenas o body onload porque eu não sabia onde chamar a função showCarga();

Consegue enxergar onde estou errando?

O que eu quero é:

• Quando eu clicar no botão Listar Contatos na página agenda.php, o ícone loading já ser mostrado nesse tempo que demora para a consulta ser finalizada;
• Eu lidei com a função em js somente na página lista-contatos.php, o ícone aparece mas não sai, e ele aparece depois da consulta já ter sido executada.

Alguém tem algum exemplo por ai? Quero fazer isso em todas as minhas consultas, esse é um exemplo básico para que eu possa compreender melhor, tenho um sistema com consultas bem lentas e por isso essa preocupação com a estética, queria esse "loading".

Muito grato a todos que puderem colaborar.

[santos_s 12]

Tenta chamar o loading no onload da página assim.

<body onLoad="java script:showCarga();">    
    <div class="loading" id="carga">
          <img class="imgloading" src="img/ajax-loader.gif" style="height:15; width:140">
        <br/><br/>Realizando Busca...
    </div>

e oculta no final da consulta dentro do php.

echo "<script type='text/javascript'>hideCarga(this);</script>";

tenta aí.

 

 

Abraço.