Tem como fazer isto?

[webfuture 0]

Olá galera, estou com uma dúvida aqui que é a seguinte, atualmente tenho uma pagina onde listo X imagens de uma pessoa de um banco de dados, na tela o usuario tem duas opções excluir e alterar, gostaria que quando ele clicasse em alterar fosse mostrado o formulario para ele com os dados da foto (nome e descricao) com os botões cancelar e gravar, onde clicando em cancelar limpa a div onde traz o formulario e clicando em gravar ele grava os dados da foto em questão, até ai tudo bem, tudo funciona, agora o que acontece é, queria que além de gravar que ele atualizasse os dados existentes na foto sem dar refresh na página, é possível fazer isto ?

 

Vejam o código:

 

<script type="text/javascript">var xmlHttp;function createXMLHttpRequest() {	if (window.ActiveXObject) {		xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");	}	else if (window.XMLHttpRequest) {		xmlHttp = new XMLHttpRequest();	}}function excluir(id_foto) {	if (confirm("Tem certeza que deseja excluir esta foto ?")) {		window.open("minhasfotos_grava1.asp?if="+id_foto+"&a=e", "Postagem", "resizable=no, toolbar=no, status=yes, menubar=no, scrollbars=no, width=10, height=10, top=250, left=140");	}}function alterar(id_foto) {	id_da_foto = id_foto;	createXMLHttpRequest();	xmlHttp.onreadystatechange = handleStateChange;	xmlHttp.open("get", "minhasfotos_form.asp?if=" + id_da_foto, true);	xmlHttp.send(null);}function handleStateChange() {	if(xmlHttp.readyState == 1) {		document.getElementById(id_da_foto).innerHTML = "";		document.getElementById("carregando").innerHTML = "<br><img src=images/indicator.gif border=0> excluindo aguarde...";	 }	if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {		document.getElementById("carregando").innerHTML = "";		document.getElementById("formulario" + id_da_foto).innerHTML = xmlHttp.responseText;	}}function cancelar(id_da_foto){  document.getElementById("formulario" + id_da_foto).innerHTML = "";}function atualiza() {	id_da_foto = document.getElementById("id_foto").value;	createXMLHttpRequest();	xmlHttp.onreadystatechange = handleStateChange2;	xmlHttp.open("get", "minhasfotos_grava.asp?nf=" + document.getElementById("nome_foto").value + "&df=" + document.getElementById("descricao_foto").value + "&if=" + document.getElementById("id_foto").value, true);	xmlHttp.send(null);}function handleStateChange2() {	if(xmlHttp.readyState == 1) {		document.getElementById("enviando").innerHTML = "<br><img src=images/indicator.gif border=0> gravando dados aguarde...";	 }	if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {		document.getElementById("enviando").innerHTML = "";		document.getElementById("formulario" + id_da_foto).innerHTML = "";		document.getElementById("resposta").innerHTML = xmlHttp.responseText;	}}</script>

Este é o JS:

 

Agora o bloco onde encontra-se a foto e as divs:

 

																			<table border="0" width="496" align="center" bordercolor="#000000" bgcolor="#FAEFEF" height="370" cellspacing="0" cellpadding="0">																				<tr>																					<td valign="top" align="center">																						<table border="0" bordercolor="#000000" width="100%" align="center">																							<tr>																								 <td align="center" width="50%" valign="top">																										<table border="0" width="100%" align="center">																											<tr>																												<td align="center" class="formato3" valign="top"><a href="perfil_geral_mostra.asp?ic=" class="preto"><img src="images/usuarios/2/5.jpg" border="0" width="200" height="200"></a></td>																											</tr>																											<Tr>																												<td height="5"></td>																											</tr>																											<tr>																												<Td align="center" class="formato3">Kate</td>																											</tR>																											<tr>																												<Td align="center" class="formato3">Esta é a Kate</td>																											</tR>																											<Tr>																												<td height="5"></td>																											</tr>																											<tr>																												<td align="center" class="formato3"><div id="5"><a href="#" OnClick="alterar(5);return false;" class="azul">Editar dados</a>    <a href="#" OnClick="excluir(5);return false;" class="azul">Excluir foto</a></div></td>																											</tr>																																																																														</table>																																																				<div id="enviando"></div>																										<div id="resposta"></div>																										<div id="carregando"></div>																										<div id="formulario5"></div>																									</td>																								 </tr>																							  </table>  																							  																						   </td>																						 </tr>																					   </table>

Não sei se fui bem claro, se precisarem de mais informações.

 

Xavier

[MadPatryk 0]

da sim ué...você tem duas opções...1st: é criar os objetos de edição (input text) dinamicamente2nd: é fazer duas divs, uma com os dados, e outra com os inputs (esse modo é o mais feio rsss)dai qdo clicar em edit é só fazer a troca !:)

[Ghean 0]

usa nos inputs o codigo do Fabyo (Edição Rapida (AJAX), Edita os campos com um clic)

http://forum.imasters.com.br/index.php?showtopic=163596

[webfuture 0]

Olá pessoal, valeu pelas respostas, acho que a segunda opção (clicar em cima do nome e ele virar text para edição) é a que melhor se encaixa na minha situação, pior que ja tinha feito isto em outro site e nem me lembrei, na correria...Resolve x problemas de uma vez só, muito mais fácil.. boa mesmo..valeu mais uma vez pela ajuda de todos,Xavier