Atualizando uma div sem atualizar a pagina

josenilson · Junho 30, 2017

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'>";
?>

Omar~ · Junho 30, 2017

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 · Junho 30, 2017

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 · Junho 30, 2017

Sobre o ajax...

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

josenilson · Julho 3, 2017

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 · Julho 3, 2017

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~ · Julho 4, 2017

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>

<!-- #Local para abrir o arquivo que virá do ajax -->>
<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 · Julho 4, 2017

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 · Julho 4, 2017

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 · Julho 4, 2017

Tens um '>' a mais aqui:

foreach($motoristas as $motorista)>:

Arquivado

Atualizando uma div sem atualizar a pagina

Recommended Posts

josenilson 4

Compartilhar este post

Link para o post

Compartilhar em outros sites

Omar~ 87

Compartilhar este post

Link para o post

Compartilhar em outros sites

josenilson 4

Compartilhar este post

Link para o post

Compartilhar em outros sites

gabrieldarezzo 255

Compartilhar este post

Link para o post

Compartilhar em outros sites

josenilson 4

Compartilhar este post

Link para o post

Compartilhar em outros sites

gabrieldarezzo 255

Compartilhar este post

Link para o post

Compartilhar em outros sites

Omar~ 87

Compartilhar este post

Link para o post

Compartilhar em outros sites

josenilson 4

Compartilhar este post

Link para o post

Compartilhar em outros sites

josenilson 4

Compartilhar este post

Link para o post

Compartilhar em outros sites

wootzor 103

Compartilhar este post

Link para o post

Compartilhar em outros sites

Fixar div até atingir uma certa altura

Ajuda com Extends e envio para o banco

PHP+Codeginiter - Orientação para Impressão

Conteúdo Similar

Fóruns

Tempo Real

Informação importante