Salvar o valor de uma variável antes do refresh

[jpsan]

Bom dia (para quem ainda não almoçou )

Gente gostaria de saber se é possível salvar o valor de uma variável antes do refresh pa pagina.

Por exemplo:

Criei uma pagina html que usa um range. Minha ideia seria enviar os valor do range via php para o servidor. Eis o problema: toda vez que eu envio algo para o a pagina recarrega novamente, perdendo a posição que estava o range.

Pensei em resolver isso com javascript, mas confesso que não tenho ideia de como fazer :/

Obs:

Outro problema na pagina existem outros 2 eventos submit que que regarregam a pagina também, perdendo o valor do range.

Obrigado a todos

[DiF]

Olá,

isso pode ser resolvido com ajax.

use a função $.ajax() do jquery para fazer a requisição assíncrona.. assim eliminando os refreshs quando submeter o formulário.

[jpsan]

Olá dif, nunca trabalhei com ajax. Vou dar uma estudada aqui para ver como funciona

Depois retorno aqui para dizer se deu certo.

Só uma coisa: o ajax vai dispensar o uso do php?

[DiF]

Não, o o ajax é só uma técnica javascript que faz uma requisição assíncrona do arquivo php, ou seja, toda vez que você submete um formulário em ajax, ele envia os dados por post ou get ao arquivo php sem a necessidade de "recarregar" a página.

Existem varias funções no jquery.. dentre elas: $.ajax() é a melhor por permitir mais de um callback( retorno), entenda-se como as mensagens de enviada, erro.. etc..

[jpsan]

Olá dei uma boa estudada em como usar o Ajax mas ainda assim me surgiram dúvidas:

Usei este código como exemplo do site Xti:

window.onload = function(){
	document.getElementById("envia").onclick = function(){
		//status=200; statusText=OK
		var ajax = new XMLHttpRequest();
		ajax.onreadystatechange = function() {
			if(ajax.readyState ==4) { //Local onde será lido a requisição
				alert("requisição chegou");	
			}
		}
		ajax.open ("POST","arduino.php");
		ajax.send(null);	
	}	
	return false;	
}

Minha dúvida é como eu posso fazer para enviar uma variável para o php interpretar?

Por exemplo se o usuário pressionar um botão como o servidor vai perceber isso?

Séria no ajax.send(null)??

Obrigado

[DiF]

Olá, podes fazer assim:

Vamos supor que seu formulário tenha um campo para digitar um valor X

<input type="text" name="valor" id="valor"/>

window.onload = function(){
	document.getElementById("envia").onclick = function(){
		//status=200; statusText=OK
		var ajax = new XMLHttpRequest();
		ajax.onreadystatechange = function() {
			if(ajax.readyState ==4) { //Local onde será lido a requisição
				alert("requisição chegou");	
			}
		}

                [B]valor = getElementById("valor").value;[/B]

               [B] dados = 'valor='+valor[/B]
		ajax.open ("GET","arduino.php");
		ajax.send([B]dados[/B]);	
	}	
	return false;	
} 

Veja que o valor do campo foi pego pelo manipulador do DOM getElementById()..

Depois foi montada a query com o valor e atribuida a uma variável.. e por fim eviamos a query pela função ajax.send() com o parametro contendo a variável.

Bem.. esse é o método da técnica com ajax em javascript puro.. particularmente eu não gosto de trabalhar com ela.. para isso eu uso jquery que é bem mais prático para entender e utilizar.. o mesmo poderia ser feito desta forma:

$.(document).ready(function(){
   //atribui o botão a uma variável
   var envia = $("#envia");

    //pega  valor do campo
    var valor = $("#valor").val();  

   envia.click(function(e){
       // mesmo que return false
       e.preventDefault();

       $.ajax({
             url: 'arduino.php',
             type: 'POST',
             data: valor,
             datatype: 'html',
             success: function(data){	
		            alert(data);				
			}  
       });  
});

o parametro data, pode ser uma mensagem em um echo no arquivo arduino.php ..

veja as diferenças.. na minha opinião o jQuery é mais enxuto.

[jpsan]

dif, usei o código que você falou e não aconteceu nada.

Quando eu clico no botão envia, não aparece o alert falando que a requisição chegou.

Seguindo no meu exemplo, eu criei um um evento submit na pagina:

<form method="POST" action="arquivo.php">
			<input type="hidden" value="Enviar" name="estado" >
	      <input type="submit" value="Enviar" name="envia">
		</form>

E criei este este codigo no Php

<?php
$port = fopen("COM4", "w");
if ($_POST['estado']=="envia")
{
 	fwrite($port, "<l>"); 
}

Agora passar isso tudo pro ajax está díficil

[jpsan]

Boa tarde;

Fiz mais uns testes agora, mas o problema está em recber os dados do ajax pelo php.

Tentei isso:

Criei está div no html

<div id="envia">  
             <input type="button" value="Acender Led" name="Acende" id="acende" onClick="estado('acende')" >
             <input type="button" value="Apagar Led"  name="Apaga" id="apaga" onClick="estado('apaga')" >
        </div>

O código javascript:

*obs: Não fiz por Jquery por não saber usar :/. No futuro irei estuda-lá

var aux; //Variavel que irá verificar qual botão foi pressionado
		 //Recebe como valor "acende" ou "apaga"
function estado(x) {
	aux = x
	Dados.value = aux;
	//alert(aux);
}

window.onload = function(){ //Codigo Ajax
	document.getElementById("envia").onclick = function(){
		//status=200; statusText=OK
		var ajax = new XMLHttpRequest();
		ajax.onreadystatechange = function() {
			if(ajax.readyState ==4) { //Local onde será lido a requisição
				//alert(aux);	
			}
		}


		ajax.open ("POST","arduino.php");
		ajax.send(aux);	
	}	
	return false;	
}

E o arquivo php

<?php
$recebe = $_POST['aux'];   //var que irá receber os dados do Ajax


if($recebe == "acende") {
	fwrite($port, "<l>"); 
}