5 replies to this topic

[DarkSign]

E ae povo?

Não entendo muito de ajax, nem sei como começar a utilizar xD.

Mas só quero resolver um problema que, ao meu ver, é simples, não sei o que vcs acham.

Seguinte, eu tenho uma div num site do cliente, que deve ser atualizada com pequenos textos (reuniões, chamadas, etc), só que eu não queria criar uma área de admin apenas para a tarefa de editar uma div.

Gostaria do seguinte: quando o cara se logar, aparecer um link (ou botão) embaixo da div, escrito "Editar". Quando clica nisso, abre um textbox em cima do conteúdo da div, com o texto anterior dentro, pra edição. O link muda pra "Fechar". Ao clicar em Fechar, a div retorna com o texto atualizado.

Alguma idéia de como posso implementar isso?

/*DarkSign*/

[Renan L. Queiroz]

A parte visual fica toda por conta do Js mesmo, restando
para o script server-side somente o UPDATE e apresentação do resultado.

Já tem alguma função Js-Ajax padrão, usa algum Framework?

O principio da funcionalidade seria o seguinte:
1 - Incluir o link para admins.
2 - Criar função Js para apresentar tela de edição.
3 - Ao confirmar alteração chamar página com script server-side (ASP, PHP) via Ajax.
4 - Página com script server-side com conteúdo para UPDATE do campo roda por trás.
5 - Função para chamar o conteudo alterado também Ajax.

Temos no final então 3 páginas
1 - A tela acessada pelo usuário.
2 - A página com script de UPDATE dos dados.
3 - A página com script que requisita os dados (já alterados) para serem apresentados.

Obs: sendo que essa parte do uptade pode estar contida na página que apresenta,
bastando simplesmente incluir uma verificação para quando solicitada o UPDATE
esse bloco do script seja executado antes da apresentação do dados!

Espero ter sido claro!

Edição feita por: Renan L. Queiroz, 13/05/2009, 11:12.

[DarkSign]

Boa explicação. Se eu soubesse ajax já estaria fazendo.
A parte de updtate e requisição por PHP tá tranquila.

Não, não uso framework, nem sei como implementar algo do tipo nos meus sites.

Afe... talvez eu tenha que fazer uma página de admin simples mesmo...

/*DarkSign*/

[Renan L. Queiroz]

Bem vamos lá!

Você deve estar dando uma lida sobre metodologia Ajax, né!
Então vamos direto ao ponto, sem mais delongas.

Aqui temos uma função Js padrão para Ajax (deve estar meio desatualizada)
funcaoAjax.js

function lerURL(url, dados){

		xmlhttp = getObjectAjax();
		// xmlhttp.onreadystatechange = xmlhttpChange; // sincrono, só funciona no IE

		if(xmlhttp != null){

			xmlhttp.open("POST", url, false); // false - simetria (neste caso é assincrona pois não fazemos 2 coisas ao mesmo tempo)
			xmlhttp.setRequestHeader("Content-Type" , "application/x-www-form-urlencoded; charset=iso-8859-1"); // usado para POST
			xmlhttp.setRequestHeader("Cache-Control", "no-store, no-cache, must-revalidate");
			xmlhttp.setRequestHeader("Cache-Control", "post-check=0, pre-check=0");
			xmlhttp.setRequestHeader("Pragma", "no-cache");
			xmlhttp.send(dados);

			// alert(xmlhttp.responseText) // para mostrar o que esta sendo impresso na div do ajax (verificar quando houver erro)
			if (xmlhttp.readyState == 4){ // se o estado do documento mudou

				if (xmlhttp.status == 200){ // se não houve nenhum erro - status OK
					document.getElementById("divConteudoAjax").innerHTML = xmlhttp.responseText;
				}
				else{
					alert("ERRO!"); 
				}
			}
		}
		else{
			alert("O browser utilizado por você não suporta AJAX!"); 
		}
	};

	function getObjectAjax(){

		var xmlObj;

		if (window.ActiveXObject){ // Código para o IE
			xmlObj = xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
		}
		else if (window.XMLHttpRequest){ // Código para o FF
			xmlObj = new XMLHttpRequest();
		}

		return xmlObj;
	};

Atente para a linha:

document.getElementById("divConteudoAjax").innerHTML = xmlhttp.responseText;

É aonde a página requisitada será impressa.
Ai simplesmente seria legal vc colocar essa div no template caso hajam muitos locais que se use a função.

A função acima fica como bibioteca sendo inserida como include na página que se deseja usar.
Da seguinte forma:

<script language="JavaScript" src="funcaoAjax.js"></script>

Agora só falta a requisição na página, pois a funcionalidade vc já possui,
que ficaria da seguinte forma:

<script>
	function manterComentario(op){

		var dados = "enganador="+ Math.random(); 
			dados = "&texto"+ document.getElementById('inputTxtTexto').value;
			dados = "&alterar="+ op;

		lerURL("manter_comentario.php", dados);

		document.getElementById("divTextos").innerHTML = document.getElementById("divConteudoAjax").innerHTML;
		document.getElementById("divConteudoAjax").innerHTML = "";
	};
</script>

Nessa função estou requisitando o carregamento/alteração dos comentários (textos) onde:
inputTxtTexto - é o input com o texto que o usuário informará.
op - é a variavel responsável em informar a sua página php se haverá atualização ou só carregamento.
manter_comentario.php - será sua página, contendo somente a funcionalidade e no max impressão do que se quer, sem tags <html>, <body> ...
é como se fosse somente o que se imprime dentro do body, conteúdo normal.
dados - são simplesmente os parametros que serão usados na página requisitada.
Por final essas 2 linhas:

document.getElementById("divTextos").innerHTML = document.getElementById("divConteudoAjax").innerHTML;
document.getElementById("divConteudoAjax").innerHTML = "";

é simplesmente passando os dados da divAjax para a div de sua escolha e limpeza da div ajax para reuso.

Mais informações:
AJAX Tutorial - W3schools
AJAX Suggest Source Code


Espero que isso possa ajudar e que dê certo! rs.

Edição feita por: Renan L. Queiroz, 14/05/2009, 16:32.

[DarkSign]

Opa. ajudou bastante. Agora estou analisando o codigo e tentando entender cada parte.

Fiquei com duvida nesse trecho:

var dados = "enganador="+ Math.random(); 
			dados = "&texto"+ document.getElementById('inputTxtTexto').value;
			dados = "&alterar="+ op;

O que isso esta fazendo?

Obrigado pelos links tmb. Realmente tava dificil de enteder como podia mandar conteudo que nao fosse texto pro ajax, hehehe.
O #000000 vai estudar um pouco mais xD.

/*DarkSign*/

[Renan L. Queiroz]

Nessa parte concatenando os dados para enviar para a página que será executada no Ajax!
O Math.random() é para evitar cash, pois gera uma numero aleatório.
O texto é o comentário do usuário.
Op coloquei para que a página que é requisitada pelo Ajax possa
somente carregar os dados, pois pensei na seguinte forma.

Lógica da página PHP:

If ($_request["op"] == 1){
	// Executa alteração do comentário
}
// Codigo para apresentação do comentário

Neste caso quando o op for 1 indica que houve mudança, e assim
a página e alterada para depois ser carregada na div Ajax!

Edição feita por: Renan L. Queiroz, 15/05/2009, 14:46.