Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

josenilson

Atualizando uma div sem atualizar a pagina

Recommended Posts

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

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

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

Compartilhar este post


Link para o post
Compartilhar em outros sites
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 . 

Compartilhar este post


Link para o post
Compartilhar em outros sites
Em 30/06/2017 at 15:09, gabrieldarezzo disse:

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>

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

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]

 

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

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"

Compartilhar este post


Link para o post
Compartilhar em outros sites
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>

<!-- #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

  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;
}

Compartilhar este post


Link para o post
Compartilhar em outros sites
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 '>'

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

  • Conteúdo Similar

    • Por greg_kaippert
      Boa tarde galera!
      Estou com uma dúvida, preciso ativar e desativar um registro com ajax, porém sem refresh. Porque eu uso MENU ACCORDION, aí se atualizar a página, volta no inicio da página, então eu preciso que atualiza essa tabela sem refresh, para não sair do menu ACCORDION. O código já está todo funcionando, eu só preciso dessa parte de atualizar somente a tabela. Alguém poderia me explicar ? Brigado aí galera.
       
      Meu index.php:

      <table> <thead> <tr style="height:50px"> <td></td> <td></td> <td><span style="margin-left:40px; font-size:18px;">Status</span></td> <td></td> </tr> </thead> <?php while($lista = $resu->fetch(PDO::FETCH_ASSOC)) { ?> <tr> <td> <!-- inicio do visualizar instalacao --> <a href="<?php echo $lista['id_instalacao']; ?>" id="<?php echo $lista['id_instalacao']; ?>" class="obsCli"> <img src="[url=http://localhost/wordpress/wp-content/themes/onetone/images/images/edit.png]http://localhost/wordpress/wp-content/themes/onetone/images/images/edit.png[/url]" title="Visualizar instalação"></a> </td> <td> <span style="margin-left:20px;"> Instalação: <?php echo $lista['nome_cliente']; ?> </span> </td> <td> <span style="margin-left:20px;"> <?php if ($lista['status'] == 1) { ?> <span style="color:#006; margin-left:20px;">ATIVADO</span> <?php } else { ?> <span style="color:#F00; margin-left:20px;">DESATIVADO</span> <?php }?> </span> </td> <td> <span style="margin-left:100px;"> <?php if ($lista['status'] == 1) { ?> <a href="#" id="<?php echo $lista['id_instalacao']; ?>" class="desativa"><img src="[url=http://localhost/wordpress/wp-content/themes/onetone/images/images/ativar.png]http://localhost/wordpress/wp-content/themes/onetone/images/images/ativar.png[/url]" title="Desativar Instalação"></a> <?php } else { ?> <a href="#" id="<?php echo $lista['id_instalacao']; ?>" class="ativa"><img src="[url=http://localhost/wordpress/wp-content/themes/onetone/images/images/desativar.png]http://localhost/wordpress/wp-content/themes/onetone/images/images/desativar.png[/url]" title="Ativar Instalação"></a> <?php } ?> </span> </td> </tr> <?php } ?> </table> Meu código para ATIVAR e DESATIVAR com AJAX:

      $(document).ready(function() { $('#msg_ativ').hide(); }); $(function() { $('.ativa').on('click', function(){ $('#msg_ativ').fadeIn(); var id = this.id; $.ajax({ type: "POST", url: "[url=http://localhost/wordpress/wp-content/themes/onetone/accordion/ativa_desa.php]http://localhost/wordpress/wp-content/themes/onetone/accordion/ativa_desa.php",[/url] data: {id: id}, success: function( data ) { $("#ativado").fadeIn(1000); $("#ativado").html("Ativado!"); $('#msg_ativ').fadeOut(1000); location.reload("table"); //alert(data); } }); return false; }); }); $(document).ready(function(){ $('.desativa').on('click',function(){ var id1 = this.id; $.ajax({ type: "POST", url: "[url=http://localhost/wordpress/wp-content/themes/onetone/accordion/ativa_desa.php]http://localhost/wordpress/wp-content/themes/onetone/accordion/ativa_desa.php",[/url] data: {id1: id1}, success: function( data ) { $("#desativado").fadeIn(1000); $("#desativado").html("Desativado!"); location.reload("table"); //alert(data); } }); return false; }); });  
      E a página que eu pego as informações:

      <?php include("conexao.php"); try{ $id = $user_ID; $resu = $pdo->query("SELECT g.id_grupo, g.nome_grupo, g.ID, w.ID FROM cad_grupo g, wp_VzQCxSJv7uL_users w WHERE g.ID = w.ID and g.ID = $id"); } catch(Exception $e) { print "ERRO!:". $e->getMessage() . "<br>"; die(); } ?> <!doctype html> <html> <head> <meta charset="utf-8"> <title>Documento sem título</title> <script> $(document).ready(function(){ // Evento change no campo tipo $("select[name=nome_grupo]").change(function(){ // Exibimos no campo marca antes de concluirmos $("select[id=clientes]").html('<option value="">Carregando...</option>'); // Exibimos no campo marca antes de selecionamos a marca, serve também em caso // do usuario ja ter selecionado o tipo e resolveu trocar, com isso limpamos a // seleção antiga caso tenha feito. $("div[id=id_instalacao]").html(''); // Passando tipo por parametro para a pagina ajax-marca.php $.post("[url=http://localhost/wordpress/wp-content/themes/onetone/accordion/dados.php]http://localhost/wordpress/wp-content/themes/onetone/accordion/dados.php",[/url] {id:$(this).val()}, // Carregamos o resultado acima para o campo marca function(valor){ $("select[id=clientes]").html(valor); } ) }) // Evento change no campo marca $("select[id=clientes]").change(function(){ // Exibimos no campo modelo antes de concluirmos $("div[id=id_instalacao]").html('<option value="">Carregando...</option>'); // Passanddo marca por parametro para a pagina ajax-modelo.php $.post("[url=http://localhost/wordpress/wp-content/themes/onetone/accordion/dados1.php]http://localhost/wordpress/wp-content/themes/onetone/accordion/dados1.php",[/url] {id:$(this).val()}, // Carregamos o resultado acima para o campo modelo function(valor){ $("div[id=id_instalacao]").html(valor); } ) }) }) </script> </head> <body> <div class="alinhar dados_controle"> <form name="listadados" id="listadados" action=""> Grupo:   <select name="nome_grupo" id="grupo"> <option value="">Escolha o grupo</option> <?php while($resut = $resu->fetch(PDO::FETCH_ASSOC)) { ?> <option value="<?php echo $resut['id_grupo']; ?>"><?php echo $resut['nome_grupo']; ?></option> <?php } ?> </select> <br><br> Clientes: <select name="nome_cliente" id="clientes"></select> <br><br> Instalações: <div id="id_instalacao"></div> <!-- Essa DIV aqui que é da TABELA, preciso que atualize essa --> </form> </div> </body> </html> Qualquer dúvida, eu explico melhor, caso não tenha sido claro.
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.