Publicado em 30 de jun.

Atualizando uma div sem atualizar a pagina

Olá pessoal, tenho uma div que lista alguns valores vindo do bando de dados, gostaria que essa div de forma automática atualiza se acada 30 segundos, eu tentei com essa meta tag em php mas isso faz com que toda a pagina atualize, tem como fazer só com a div ?

obrigado .

<?php
echo "<meta HTTP-EQUIV='refresh' CONTENT='10;URL=BAH.php'>";
?>

Discussão (9)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

Omar~· 30 de jun.

Carregue a página com ajax na div.

Use setTimeOut ou setInterval (depende do resultado que vai quer) para atualizar a div recarregando o arquivo na div assim recarregando seu conteúdo.

É a mesma para se criar chatBox

josenilson· 30 de jun.

1 hora atrás, OmarF disse:

Carregue a página com ajax na div.

Use setTimeOut ou setInterval (depende do resultado que vai quer) para atualizar a div recarregando o arquivo na div assim recarregando seu conteúdo.

É a mesma para se criar chatBox

Tem como citar um exemplo, sou iniciante com ajax .

gabrieldarezzo· 30 de jun.

Sobre o ajax...

https://github.com/gabrieldarezzo/desafiosInternos/tree/master/ajax

josenilson· 3 de jul.

Em 30/06/2017 at 15:09, gabrieldarezzo disse:

Sobre o ajax...

https://github.com/gabrieldarezzo/desafiosInternos/tree/master/ajax

Gabriel, Tudo blz ?

então estava pesquisando sobre os exemplos e me conscientizei de uma coisa, eu já tenho uma função sendo chamada na tabela, só não estou acertando atualizar a mesma com o AJAX. olha abaixo .

Função de Consulta

function listarjornadaBAH($cad_jornada){

$pdo = conectar();

try {

 $listar = $pdo->query("SELECT * FROM cad_jornada Motorista WHERE FinalizarJornada = '1' AND UF_Atual = 'BA' ");
	$listar->execute();

	$dados = $listar->fetchAll(PDO::FETCH_ASSOC);

	if ($listar->rowCount() > 0){
 return $dados;
	}else{

 return false;
	}

	} catch(PDOException $erro) {
 echo "ERRO AO lISTAR" . $erro->getMessage();

	}
}

	Aqui esta a tabela com a div montada onde listo os dados . 

	 

<div id="listar" >

<table class="table table-striped">

<thead>
<th>JORNADA</th>
<th>VEÍCULO</th>
<th>FROTA_CV</th>
<th>PLACA_CV</th>
<th>MOTORISTA</th>
<th>FROTA_CR1</th>
<th>PLACA_CR1</th>
<th>FROTA_CR2</th>
<th>PLACA_CR2</th>
<th>UF_ATUAL</th>
<th>UF_DESTINO</th>

<th>Editar</th>
<th>Excluir</th>

</thead>

<?php

// FUNÇÃO QUE LISTA AS JORNADAS CADASTRADAS

$dados = listarjornadabah ("cad_jornada");
$d = new arrayIterator($dados);

while ($d->valid()){

	$m = $d->current();
?>

<tr>

<td><?php echo $m["idCad_Jornada"]; ?></td>
<td><?php echo $m["Tipo_veiculo"]; ?></td>
<td><?php echo $m["Frota_cv"]; ?></td>
<td><?php echo $m["Placa_cv"]; ?></td>
<td><?php echo $m["Motorista"]; ?></td>
<td><?php echo $m["Frota_cr1"]; ?></td>
<td><?php echo $m["Placa_cr1"]; ?></td>
<td><?php echo $m["Frota_cr2"]; ?></td>
<td><?php echo $m["Placa_cr2"]; ?></td>

<td><?php echo $m["UF_Atual"]; ?></td>
<td><?php echo $m["UF_Destino"]; ?></td>

<td><a href="?idCad_Jornada=<?php echo $m["idCad_Jornada"]; ?>" class="btn btn-info" >Editar</a></td>
<td><a href="?exCad_Jornada=<?php echo $m["idCad_Jornada"]; ?>" onclick="return confirm('Confirmar exclusão de registro?');"class="btn btn-danger">Excluir</a></td></a>

</tr>

<?php
$d -> next();
}
?>

</table>
</div>

	Como eu faço pra atualizar esta função dentro da div ?

	 

	Eu segue esse exemplo, mas ele deixa de mostrar a div na pagina quando eu uso ele. 

	 

<script type="text/javascript">
	var intervalo = setInterval(function () { $('#listar').load('funcoes/funcoes_cad_jornada.php'); }, 5);
</script>

gabrieldarezzo· 3 de jul.

Qual erro apresenta?

Já tentou ir dando um var_dump/die ?

<?php

var_dump($dados);
die();

	Ir inspecionando o retorno dos dados, está chegando oq você espera?

	Ir inspecionando o retorno do ajax (como está exemplificado no link que mandei?)

	 

	 

	Você pode fazer um foreach ao invés de usar o intererator, veja se fica mais limpo a leitura:

$motoristas = listarjornadabah("cad_jornada");

foreach($motoristas as $motorista)>: ?>
	<tr>
 <td><?php echo $motorista["idCad_Jornada"]; ?></td>
 <td><?php echo $motorista["Tipo_veiculo"]; ?></td>
 <td><?php echo $motorista["Frota_cv"]; ?></td>
 <td><?php echo $motorista["Placa_cv"]; ?></td>
 <td><?php echo $motorista["Motorista"]; ?></td>
 <td><?php echo $motorista["Frota_cr1"]; ?></td>
 <td><?php echo $motorista["Placa_cr1"]; ?></td>
 <td><?php echo $motorista["Frota_cr2"]; ?></td>
 <td><?php echo $motorista["Placa_cr2"]; ?></td>

 <td><?php echo $motorista["UF_Atual"]; ?></td>
 <td><?php echo $motorista["UF_Destino"]; ?></td>

 <td><a href="?idCad_Jornada=<?php echo $motorista["idCad_Jornada"]; ?>" class="btn btn-info" >Editar</a></td>
 <td><a href="?exCad_Jornada=<?php echo $motorista["idCad_Jornada"]; ?>" onclick="return confirm('Confirmar exclusão de registro?');"class="btn btn-danger">Excluir</a></td></a>
	</tr>
<?php endif; ?>

	 

	Outra coisa não entendi o motivo de você passar um parametro dentro da função:

	listarjornadaBAH, você pode criar funções sem parametros (void)

	 

	Ex:

<?php

//Não precisa de parametro e retorna um array de numeros

function funcaoSemParametro(){
  return array(1,2,3);
}

print_r(funcaoSemParametro()); // Vai imprimir o array: [1,2,3]

Omar~· 4 de jul.

Acho que assim vai, "não testei mas acho que vai de boa!"

Primeiro criei a função com jQuery para executar o ajax

Spoiler

function ajaxCarrega(campo, arquivo) {
 $.ajax({
 dataType: 'html',
 method: 'GET',
 url: arquivo,
 success: function (html) {
 $(campo).html(html);
 }
 });
 return false;
}

  

	Note que possui 2 parâmetros:

-
Campo é o nome da div onde vai ser carregado um arquivo

-
Arquivo é o nome e diretório para o arquivo que vai ser exibido, exemplo '../../pasta/arquivo.php'

Vou simular que estou na index e o arquivo que vai ler está na pasta raiz do site e não em sub pastas.

Então na index eu coloco a chamo a função:

Spoiler

<script type="text/javascript">
 $(document).ready(function () {
 ajaxCarrega('.mostra-o-ajax', 'meu-arquivo.php');
 });
</script>

>

<div class="mostra-o-ajax"></div>

  

	 

	Nesse caso tenho a div.class mostra-o-ajax  que vai se onde a mágica vai acontecer e o meu-arquivo.php que fará todas as demais funções PHP de leitura de banco ou qualquer coisa.

	 

	No meu-arquivo.php

 Spoiler

<script type="text/javascript">
 $(document).ready(function () {
 setTimeout(function () {
 ajaxCarrega('.mostra-o-ajax', 'meu-arquivo.php');
 }, 3000);
 });
</script>

<p>Coloque o conteúdo que fará a leitura de dados e mostrará</p>
<?php

/*
Seu conteúdo como desejar
No caso tudo que tenha no arquivo que tá escrito isso:
<div id="list"> ... bla bla bla...
*/

Note que no arquivo que vai ser carregado eu usei o setTimeout com delay de 3 segundos.

Assim sendo toda vez que o arquivo for carregado ele novamente iniciará a contagem dos 3 segundos e carregará ele mesmo na mesma div através da função ajaxCarrega.

Por fim também acho mais viável usar um foreach no array associativo de retorno da PDO "FETCH_ASSOC"

josenilson· 4 de jul.

2 horas atrás, OmarF disse:

Acho que assim vai, "não testei mas acho que vai de boa!"

Primeiro criei a função com jQuery para executar o ajax

Ocultar conteúdo

function ajaxCarrega(campo, arquivo) {
 $.ajax({
 dataType: 'html',
 method: 'GET',
 url: arquivo,
 success: function (html) {
 $(campo).html(html);
 }
 });
 return false;
}

  

 Note que possui 2 parâmetros:

-
Campo é o nome da div onde vai ser carregado um arquivo

-
Arquivo é o nome e diretório para o arquivo que vai ser exibido, exemplo '../../pasta/arquivo.php'

Vou simular que estou na index e o arquivo que vai ler está na pasta raiz do site e não em sub pastas.

Então na index eu coloco a chamo a função:

Ocultar conteúdo

<script type="text/javascript">
 $(document).ready(function () {
 ajaxCarrega('.mostra-o-ajax', 'meu-arquivo.php');
 });
</script>

>

<div class="mostra-o-ajax"></div>

  

  

 Nesse caso tenho a div.class mostra-o-ajax  que vai se onde a mágica vai acontecer e o meu-arquivo.php que fará todas as demais funções PHP de leitura de banco ou qualquer coisa.

  

 No meu-arquivo.php

 Ocultar conteúdo

<script type="text/javascript">
 $(document).ready(function () {
 setTimeout(function () {
 ajaxCarrega('.mostra-o-ajax', 'meu-arquivo.php');
 }, 3000);
 });
</script>

<p>Coloque o conteúdo que fará a leitura de dados e mostrará</p>
<?php

/*
Seu conteúdo como desejar
No caso tudo que tenha no arquivo que tá escrito isso:
<div id="list"> ... bla bla bla...
*/

Note que no arquivo que vai ser carregado eu usei o setTimeout com delay de 3 segundos.

Assim sendo toda vez que o arquivo for carregado ele novamente iniciará a contagem dos 3 segundos e carregará ele mesmo na mesma div através da função ajaxCarrega.

Por fim também acho mais viável usar um foreach no array associativo de retorno da PDO "FETCH_ASSOC"

Obrigado pela ajuda,

essa primeira função eu vou criar ela dentro do index ?

function ajaxCarrega(campo, arquivo) {
 $.ajax({
 dataType: 'html',
 method: 'GET',
 url: arquivo,
 success: function (html) {
 $(campo).html(html);
 }
 });
 return false;
}

josenilson· 4 de jul.

5 horas atrás, gabrieldarezzo disse:

Qual erro apresenta?

Já tentou ir dando um var_dump/die ?

<?php

var_dump($dados);
die();

 Ir inspecionando o retorno dos dados, está chegando oq você espera?

 Ir inspecionando o retorno do ajax (como está exemplificado no link que mandei?)

  

  

 Você pode fazer um foreach ao invés de usar o intererator, veja se fica mais limpo a leitura:

$motoristas = listarjornadabah("cad_jornada");

foreach($motoristas as $motorista)>: ?>
	<tr>
 <td><?php echo $motorista["idCad_Jornada"]; ?></td>
 <td><?php echo $motorista["Tipo_veiculo"]; ?></td>
 <td><?php echo $motorista["Frota_cv"]; ?></td>
 <td><?php echo $motorista["Placa_cv"]; ?></td>
 <td><?php echo $motorista["Motorista"]; ?></td>
 <td><?php echo $motorista["Frota_cr1"]; ?></td>
 <td><?php echo $motorista["Placa_cr1"]; ?></td>
 <td><?php echo $motorista["Frota_cr2"]; ?></td>
 <td><?php echo $motorista["Placa_cr2"]; ?></td>

 <td><?php echo $motorista["UF_Atual"]; ?></td>
 <td><?php echo $motorista["UF_Destino"]; ?></td>

 <td><a href="?idCad_Jornada=<?php echo $motorista["idCad_Jornada"]; ?>" class="btn btn-info" >Editar</a></td>
 <td><a href="?exCad_Jornada=<?php echo $motorista["idCad_Jornada"]; ?>" onclick="return confirm('Confirmar exclusão de registro?');"class="btn btn-danger">Excluir</a></td></a>
	</tr>
<?php endif; ?>

  

 Outra coisa não entendi o motivo de você passar um parametro dentro da função:

 listarjornadaBAH, você pode criar funções sem parametros (void)

  

 Ex:

<?php

//Não precisa de parametro e retorna um array de numeros

function funcaoSemParametro(){
  return array(1,2,3);
}

print_r(funcaoSemParametro()); // Vai imprimir o array: [1,2,3]

tentei limpar o código utilizando o foreach mas ta tando erro

deixei assim

<?php
// FUNÇÃO QUE LISTA AS JORNADAS CADASTRADAS

$motoristas = listarjornadabah ("cad_jornada");

foreach($motoristas as $motorista)>: ?>

<tr>
 <td><?php echo $motorista["idCad_Jornada"]; ?></td>
 <td><?php echo $motorista["Tipo_veiculo"]; ?></td>
 <td><?php echo $motorista["Frota_cv"]; ?></td>
 <td><?php echo $motorista["Placa_cv"]; ?></td>
 <td><?php echo $motorista["Motorista"]; ?></td>
 <td><?php echo $motorista["Frota_cr1"]; ?></td>
 <td><?php echo $motorista["Placa_cr1"]; ?></td>
 <td><?php echo $motorista["Frota_cr2"]; ?></td>
 <td><?php echo $motorista["Placa_cr2"]; ?></td>

 <td><?php echo $motorista["UF_Atual"]; ?></td>
 <td><?php echo $motorista["UF_Destino"]; ?></td>

 <td><a href="?idCad_Jornada=<?php echo $motorista["idCad_Jornada"]; ?>" class="btn btn-info" >Editar</a></td>
 <td><a href="?exCad_Jornada=<?php echo $motorista["idCad_Jornada"]; ?>" onclick="return confirm('Confirmar exclusão de registro?');"class="btn btn-danger">Excluir</a></td></a>
	</tr>

	mas o erro na pagina . aponta no foreach

	Parse error: syntax error, unexpected '>'

wootzor· 4 de jul.

Tens um '>' a mais aqui:

foreach($motoristas as $motorista)>: