Ir para conteúdo

Arquivado

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

lck

Ajax/Javascript

Por , em Javascript

Recommended Posts

gabrieldarezzo    255

gabrieldarezzo
Postado

Você esta no caminho certo.

Falta apenas abstrair essa tarefa:...

nesta pagina eu gostaria de receber os arquivos com o Ajax e não através do PHP que é como estou fazendo no momento (<?= texto ?>)

Enxergo as seguintes 'task/jobs' pra ser fazer:

1° Conseguir a partir do ajax mudar o status dos 'radios'. (vamos utilizar uma mockzinho, para testar)

2° Consumir a resposta do seu php

3° Ficar consumindo o tempo todo dando a impressão de 'Real Time' (JS - setInterval talvez?)

Vamos olhar o exemplo abaixo apenas para 'setar' o radio:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title></title>
</head>
<body>

	<p>Selecione o estado do Dispositivo</p>
	<label>
		<input type="radio" name="ligado" value="S" id="ligado-s"/> Ligado<br />
	</label>
	
	<label>
		<input type="radio" name="ligado" value="N" id="ligado-n"/> Desligado<br />
	</label>

	
<script type="text/javascript">

//Equivalente ao retorno do Ajax
var dipositivo = 'N';


//Caso esteja Ligado
if(dipositivo == 'S'){
	document.getElementById('ligado-s').checked  = true;
} else {
	document.getElementById('ligado-n').checked  = true;
}

//Da uma olhada:
//http://www.w3schools.com/jsref/prop_radio_checked.asp

</script>

</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

gabrieldarezzo    255

gabrieldarezzo
Postado

Agora vamos pegar e utilizar o Ajax + o conceito de setagem simples do post #2

<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title></title>
</head>
<body>

	<p>Selecione o estado do Dispositivo</p>
	<label>
		<input type="radio" name="ligado" value="S" id="ligado-s"/> Ligado<br />
	</label>
	
	<label>
		<input type="radio" name="ligado" value="N" id="ligado-n"/> Desligado<br />
	</label>

	
<script type="text/javascript">


ajax = new XMLHttpRequest();
ajax.open('GET', 'consulta_radio.php', true);
ajax.send();

ajax.onreadystatechange = function() {
	if(ajax.readyState == 4 && ajax.status == 200) {
			
		var dipositivo = ajax.responseText;


		//Caso esteja Ligado
		if(dipositivo == 'S'){
			document.getElementById('ligado-s').checked  = true;
		} else {
			document.getElementById('ligado-n').checked  = true;
		}


		
	}
}
		



</script>

</body>
</html>

E obviamente precisamos da pagina que consulta no seu contexto seria a 'recebe.php', porem prefiro chamar de 'consulta_radio.php' (intuitivo não? kkk)

consulta_radio.php:

<?php

/*
//Recebe parametro via GET

//Trata contra SQL Injection


$radio1 = mysqli_query($conn,"SELECT * FROM coluna WHERE id = 1");
// Consulta bla bla bla
//Pega o array, exibe apenas a coluna (nunca utilize o *, atrapalha o entendimento de 3°, e ainda deixa lento.)

//Reposta do radio vai ser apenas o valor do radio... vamos manter o tal do 'S' utilizando o exemplo do HTML do post #2
*/

echo 'S';

Compartilhar este post

Link para o post
Compartilhar em outros sites

gabrieldarezzo    255

gabrieldarezzo
Postado

Show está tudo funcionando... só que se eu alterar a porcaria do value na tabela coluna WHERE id = 1. vamos precisar efetuar um refresh.. porem a ideia é deixar 'tempo real'

Então é so forçar a chamada do ajax de x em x segundos...

Ai que o setInterval() faz sua magica:

Veja nosso index.html como fica:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title></title>
</head>
<body>

	<p>Selecione o estado do Dispositivo</p>
	<label>
		<input type="radio" name="ligado" value="S" id="ligado-s"/> Ligado<br />
	</label>
	
	<label>
		<input type="radio" name="ligado" value="N" id="ligado-n"/> Desligado<br />
	</label>

	
<script type="text/javascript">


window.setInterval(function(){
	
	ajax = new XMLHttpRequest();
	ajax.open('GET', 'consulta_radio.php', true);
	ajax.send();

	ajax.onreadystatechange = function() {
		if(ajax.readyState == 4 && ajax.status == 200) {
				
			var dipositivo = ajax.responseText;

			//Caso esteja Ligado
			if(dipositivo == 'S'){
				document.getElementById('ligado-s').checked  = true;
			} else {
				document.getElementById('ligado-n').checked  = true;
			}


			
		}
	}
}, 1000); //Repeat foreaver, millisec
		



</script>

</body>
</html>

(Agora altere o resultado do 'consulta_radio.php' para olhar o valor ser alterado sozinho xD

Obs:

Você pode ir alterando o 2 parâmetro para onde caber melhor.

http://www.w3schools.com/jsref/met_win_setinterval.asp

De qualquer forma essa não é a melhor maneira de resolver o problema já discutido aqui no forum sobre Real Time.

Tem algumas paradas sobre Sockets.

Oq fizemos aqui foi apenas uma simulação, já que a requisição HTTP tem um inicio e termino.

Então ficamos a cada segundo chamando a pagina 'consulta_radio.php' para ver se foi alteado.

Enfim, espero ter ajudado.

Abraços

Compartilhar este post

Link para o post
Compartilhar em outros sites

lck    0

lck
Postado

Vlw amigo, ainda não testei mas obrigado pela ajuda de qualquer forma, vou tentar adaptar para a minha situação .. :)

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

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

  Aceito