ajax e php

[ANGELA.BRANCO 0]

pessoal estao pedindo aqui no serviço para eu fazer paginas sem refresh, ja fiz os cadastros, edições e alterações e ao clicar no botão mostro um alert javascript dizendo que o banco foi alterado com sucesso, mas ao dar ok, ele dá um refresh na lista.não achei nenhum exemplo que pudesse me ajudar, alguem aqui poderia me sugerir, algum site?

[slipce 0]

Use alguma framework para trabalhar com ajax e php, facilita o seu trabalho.

[ANGELA.BRANCO 0]

então ja puchei a jquery, mas não to entendendo nada

[ANGELA.BRANCO 0]

alguem aqui ja fez um insert, update, delete, select com jquery ou qualquer outro framework e possa me mandar exemplos, para eu poder começar

[ANGELA.BRANCO 0]

poxa ninguem

[Paulo André 0]

Eu saberia te explicar se fosse do modo convencional, que gosto mais.. :DSe quiser, diz que eu tento te ajudar.

[ANGELA.BRANCO 0]

bem frenesi, eu citei a jquery, pq ja usei uma vez para fazer status, mas tb não entendo, gostaria de fazer, não tenho nenhum tipo de preferencias.

[slipce 0]

Infelismente nunca trabalhei com essa framework, fiz uma pesquisa na internet, parece que tem bastante material sobre o assunto.

[oxenti.com 0]

Ae

 

 

Olha.. eu nao to usando frameworks pra desenvolver meu site. comprei esses livros:

 

http://compare.buscape.com.br/ajax-com-php...8576081466.html

 

E um chamado ajax básico, Da mesma editora.. Muito bons...

Esse primeiro dá bastante exemplos e simplifica muito o trabalho ;)

[Paulo André 0]

Ok, neste caso vou te dar um exemplo bastante simples que é de excluir algo do banco de dados. http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

 

Vamos passo a passo:

 

1º Passo: Incluir em sua página o arquivo ajax.js, responsável pelo retorno do objeto XmlHttp.

function getHTTPObject(){	var req;	try	{		if (window.XMLHttpRequest)		{			req = new XMLHttpRequest();			if (req.readyState == null)			{				req.readyState = 1;				req.addEventListener("load", function () {					req.readyState = 4;					if (typeof req.onReadyStateChange == "function")					req.onReadyStateChange();				}, false);			}			return req;		}		if (window.ActiveXObject)		{			var prefixes = ["MSXML2", "Microsoft", "MSXML", "MSXML3"];			for (var i = 0; i < prefixes.length; i++)			{				try				{					req = new ActiveXObject(prefixes[ i ] + ".XmlHttp");					return req;				} catch (ex) {};			}		}	} catch (ex) {}	alert("XmlHttp Objects not supported by client browser");}

2º Passo: Supondo que você tenha o seguinte link:

<a href="java script:excluir(10)">Excluir</a>

O número 10 representa o id do registro que vamos excluir, faremos a seguinte função:

function excluir( id ){	// Instancia o objeto xmlhttp para a função excluir	var httpExcluir = getHTTPObject();	// Envio pelo método GET e página que irá fazer a exclusão	httpExcluir.open("GET", "./excluir.php?id="+id, true);		// Função de retorno	httpExcluir.onreadystatechange = function(){			if ( httpExcluir.readyState == 4 )			{				if( httpExcluir.status == 200 )				{					// Caso ocorra tudo corretamente a resposta virá aqui,					// que é exatamente o output da pagina excluir.php					alert(httpExcluir.responseText);				}			}		}	// Enviado	httpExcluir.send(null);}

E a página excluir.php:

<?php/*	Sua função de conexão com o banco de dados*/$sql = mysql_query("DELETE FROM tabela WHERE id = " . $_GET['id']);if( $sql ){	echo "Item excluído com sucesso!";}else{	echo "Ocorreu um erro ao excluir o item.";}?>

O httpExcluir.responseText terá exatamente o output da sua página excluir.php, que vai ser uma das duas resposta, caso tenha excluído com sucesso ou não.

 

Bom, não sou lá um grande "professor" mas tentei.. :P

E claro que pode aprimorar mais, mas o básico é isso ai. Qualquer dúvida mais é só dizer.

 

;)

[ANGELA.BRANCO 0]

deu certo.... você me ajudou muito frenesi, agora vou andar sozinha e qualquer duvida eu grito, obrigada.

[ANGELA.BRANCO 0]

Bem pessoal aqui deu certo até coloquei um div para fica mais bonitinho e função ficou assim:

 

<script type="text/javascript" src="js/ajax.js"></script><script type="text/javascript">function excluir(id){	// Instancia o objeto xmlhttp para a função excluir	var httpExcluir = getHTTPObject();	// Envio pelo método GET e página que irá fazer a exclusão	httpExcluir.open("GET", "adm_excluirClientes.php?id="+id, true);		// Função de retorno	httpExcluir.onreadystatechange = function(){			if ( httpExcluir.readyState == 4 )			{				if( httpExcluir.status == 200 )				{					// Caso ocorra tudo corretamente a resposta virá aqui,					// que é exatamente o output da pagina excluir.php					//alert(httpExcluir.responseText);	   document.getElementById("Cbox"+id).style.display = "none";	   document.getElementById("alert").style.display = "inline";				   document.getElementById("alertTxt2").innerHTML= httpExcluir.responseText;				}			}		}	// Enviado	httpExcluir.send(null);}</script>

fazer um div sumir ficando none é fácil, mais como eu faço para um lista com tabela, quando excluir sumir o ultimo td?

[Paulo André 0]

Você quis dizer o último <tr> certo? Que são as linhas da tabela.

 

Ai neste caso entraria um pouquinho de DOM, fiz essa função Javascript básica:

function removeLinha(){	var trs = document.getElementsByTagName("tr");	trs[trs.length-1].parentNode.removeChild(trs[trs.length-1]);}

Que irá pegar todos os tr's da página, colocar em um array, e excluir o último.

 

;)

[ANGELA.BRANCO 0]

e eu chamo a função dentro do exluir.php?

[Paulo André 0]

Não, esta função é javascript, você deve chamar ela junto com os comandos que você exibe que excluiu com sucesso.

[ANGELA.BRANCO 0]

oi excluir tr deu certo e div ?

[ANGELA.BRANCO 0]

Frenesi para apagar div é do mesmo jeito?

[Paulo André 0]

A maneira mais simples é você de alguma forma obter o id desta <div> e no retorno, dar o mesmo removeChild, e caso ele esteja no body, ficaria assim:

document.body.removeChild( document.getElementById("id_da_div") );

Entendeu?

[ANGELA.BRANCO 0]

bem da uma olhada na minha função o grande problema é na hora de excluir.

 

function excluirShow(id){	document.getElementById("alertExcluir").style.display = "inline";	document.getElementById("alertTxtExcluir").innerHTML= "Deseja realmente excluir esse cliente?";}function excluir(id){	// Instancia o objeto xmlhttp para a função excluir	var httpExcluir = getHTTPObject();	// Envio pelo método GET e página que irá fazer a exclusão	httpExcluir.open("GET", "adm_excluirBanner.php?id="+id, true);		// Função de retorno	httpExcluir.onreadystatechange = function(){			if ( httpExcluir.readyState == 4 )			{				if( httpExcluir.status == 200 )				{					// Caso ocorra tudo corretamente a resposta virá aqui,					// que é exatamente o output da pagina excluir.php					//alert(httpExcluir.responseText);					document.getElementById("boxList"+id).style.display = "none";				}			}}	// Enviado	httpExcluir.send(null);}

na verdade é nessa linha document.getElementById("boxList"+id).style.display = "none"; onde sumo com ela,

[Paulo André 0]

Esta <div> que some contém o que foi excluído, certo?

 

Então tente substituir pela linha abaixo:

document.body.removeChild( document.getElementById( "boxList" + id ) );

***************** EDITADO *****************

 

Pensei com meus botões aqui e acho que da seguinte forma seria melhor:

var obj = document.getElementById( "boxList" + id );obj.parentNode.removeChild( obj );

:D