Alteração de dados na tabela localmente

Bom dia pessoas...

Na "aula" de hoje, vamos aprender como fazer para alterarmos dados de uma tablea "localmente", ou seja, sem precisar dar um refresh na página e com muito estilo.. heheheh...

Vou tentar explicar o máximo aki, ok ?

Bom.. vamos lá...

Primeiramente vamos criar a página principal do nosso "sistema":

Adm.asp

<%
'Aqui resolvemos o problema dos caractesres
Response.AddHeader "Content-Type", "text/html; charset=iso-8859-1"
%>

<!-- aqui chamamos o arquivo .js que nos dará o resultado -->
<script src = "ajaxForn.js"></script>

<!-- Aqui é a formatação da página principal e da página que conterá a tabela a ser alterada -->
<style>

#tabela table thead tr
{

font: 80% Arial, Helvetica, sans-serif;
color:#990000;
text-align:center;
background: #F2F2F2;
font-weight:bold;
}

#tabela table tbody tr:hover
{

background:#F2F2F2;
color:#000;
}

#tabela table tbody tr
{

font:70% Arial, Helvetica, sans-serif;
color:#0050A4;
text-align:left;
font-weight:bold;
background:#FFF;
padding:5px;
}

fieldset
{

border:2px dotted #C3C3C3;
background:#FFFFEE;
}

legend
{

color: #000;
}

.buttons

{

font:100% Arial, Helvetica, sans-serif;
color:#0050A4;
text-align:left;
font-weight:bold;
background:#FFF;
padding:5px;
background:transparent;
border:0;
display:none;
}

.edita

{

display: block;
}

#tabela table
{

background: #3399FF;
width:100%;
}
#titulo

{

font: 70% Arial, Helvetica, sans-serif;
color: #CC0000;
font-weight:bold;
}
#tabela

{

margin-top:20px;
cursor: text;
}
.exc

{

text-align:center;
}

#menu a:link
{

font:80% Arial, Helvetica, sans-serif;
font-weight: bold;
text-align:center;
text-decoration:none;
color: #0050A4;
}
#menu

{

font: Arial, Helvetica, sans-serif;
font-weight: bold;
text-align:center;
text-decoration:none;
color: #0050A4;
}

#menu a:visited
{

font:80% Arial, Helvetica, sans-serif;
font-weight: bold;
text-align:center;
text-decoration:none;
color: #0050A4;
}

#menu a:hover
{

font:80% Arial, Helvetica, sans-serif;
font-weight: bold;
text-align:center;
text-decoration: underline;
color: #0050A4;
}
#cadastro

{

font:80% Verdana;
font-weight:bold;
text-align:center;
color:#990000;

}
#cadastro input,select

{

font:90% Arial, Helvetica, sans-serif;
font-weight:bold;
background: #F2F2F2;
margin-right:10px;
color:#0050A4;
}
</style>

<!-- Funções JS para realizarmos a edição -->
<script>
// Função que mostra os campos para edição
function Editar(idDiv, idSpan)
{

document.getElementById(idDiv).className = "edita";
document.getElementById(idSpan).style.display = "none";
}

//Função que esconde os campos para edição
function Voltar(idDiv, idSpan)
{

document.getElementById(idDiv).className = "buttons";
document.getElementById(idSpan).style.display = "block";
}

</script>

<!-- Nosso menu -->
<div id = "menu">
|
<a href = "#1" onclick="showPag('Forn.asp')"> Fornecedores </a>
|

</div>
<hr>

<!-- Div que receberá as páginas -->

<div id = "conteudo">
</div>

Bom.. montada a página principal, vamos agora montar a página que mostrará os dados da tabela:

Forn.asp

<%
'Response.AddHeader "Content-Type", "text/html; charset=iso-8859-1"
%>

<div id = "cadastro">
<fieldset>
<legend> Cadastro de Fornecedores</legend>
<span> Nome: </span><input id = "nome" size = "20" />
<span> Descrição: </span><input id = "desc" size = "50">
<span> Logo: </span><input id = "logo" size = "20" />
<span> Tipo: </span><select id = "tipo">
<option value="1"> Pisos Laminado </option>
<option value="2"> Carpete </option>
<option value="3"> Tapete </option>
<option value="4"> Persiana </option>
<option value="5"> Cortina </option>
</select>
<input type="button" value = "Gravar" onClick="gravaForn()">
</fieldset>
</div>
<center>
<div id = "tabela">

<!--#include file = "TabForn.asp" -->

</div>
</center>

Agora, a página que montará a tabela:

TabForn.asp

<%
' Conexão com o banco e execução da SQL para mostrar os resultados
Response.AddHeader "Content-Type", "text/html; charset=iso-8859-1"
Set Conex = Server.CreateObject("ADODB.Connection")
Conex.Open "Driver={Microsoft Access Driver (*.mdb)}; DBQ=" & Server.MapPath("../Bd/Show.mdb")
SQL = "SELECT * FROM Tbl_Fornecedor ORDER BY Nome"
Set Rs = Conex.Execute(SQL)
%>

<span id = "titulo">
De um duplo click na célula que deseja alterar
</span>
<!-- aCabeçalho da tabela -->

<table id = "tab_forn">
	<thead>
 <tr>
 <td> Nome </td>
 <td> Descrição </td>
 <td> Logo </td>
 <td> Tipo </td>
 <td id = "exc"> Excluir </td>

 </tr>
 </thead>

<!-- Aqui começa o corpo da tabela -->
<tbody>
<%

While NOT Rs.EOF
Desc = Rs("Descricao")
i = Rs("Cod")
If Rs("Tipo") = "1" Then
Tipo = "Piso Laminado"
End if
If Rs("Tipo") = "2" Then
Tipo = "Carpete"
End if
If Rs("Tipo") = "3" Then
Tipo = "Tapete"
End if
If Rs("Tipo") = "4" Then
Tipo = "Persiana"
End if
If Rs("Tipo") = "5" Then
Tipo = "Cortina"
End if
%>
<tr>
<!-- No evento "onDblClick" da TD, chamaremos a função que mostra os campos para edição. Notem que eu utilizo a variavel "<%-i%>" para diferenciar os Ids dos elementos dinamicamente -->
<td onDblClick="Editar('buttonsNome<%=i%>','spanNome<%=i%>')">
<!-- Span que mostra os dados na tabela -->
<span id = "spanNome<%=i%>"><%=Rs("Nome")%></span>
<!-- Div que contém os campos para edição -->
<div id = "buttonsNome<%=i%>" class = "buttons">
<!-- Input escondida para edição -->
<input id = "nome<%=i%>" value = "<%=Rs("Nome")%>"><br>
<!-- Botão que faz a alteração, chamando a função "GravaParte", que contém como parametros o Código do registro e o nome do campo a ser alterado -->
<input type="button" value = "Gravar" onClick="GravaParte('<%=i%>','Nome')">
<!-- Botão que cancela a alteração -->

 <input type="button" value = "Cancelar" onClick="Voltar('buttonsNome<%=i%>','spanNome<%=i%>')">

 </div>
 </td>

<!-- Bom, basta seguir a mesma lógica para o restante das colunas, como vocês podem ver abaixo -->

 <td onDblClick="Editar('buttonsDescricao<%=i%>','spanDesc<%=i%>')">
 <span id = "spanDesc<%=i%>"><%=Desc%></span>
 <div id = "buttonsDescricao<%=i%>" class = "buttons">
 <textarea id = "desc<%=i%>" cols="40" rows="5"><%=Desc%></textarea><br>
 <input type="button" value = "Gravar" onClick="GravaParte('<%=i%>','Descricao')">
 <input type="button" value = "Cancelar" onClick="Voltar('buttonsDescricao<%=i%>','spanDesc<%=i%>')">
 </div>
 </td>

 <td onDblClick="Editar('buttonsLogo<%=i%>','spanLogo<%=i%>')">
 <span id = "spanLogo<%=i%>"><%=Rs("Logo")%></span>
 <div id = "buttonsLogo<%=i%>" class = "buttons">
 <input id = "logo<%=i%>" value = "<%=Rs("Logo")%>"><br>
 <input type="button" value = "Gravar" onClick="GravaParte('<%=i%>','Logo')">
 <input type="button" value = "Cancelar" onClick="Voltar('buttonsLogo<%=i%>','spanLogo<%=i%>')">
 </div>
 </td>

 <td onDblClick="Editar('buttonsTipo<%=i%>','spanTipo<%=i%>')">
 <span id = "spanTipo<%=i%>"><%=Tipo%></span>
 <div id = "buttonsTipo<%=i%>" class = "buttons">
 <select id = "tipo<%=i%>">
 <option value="1" <%If Rs("Tipo") = "1" Then Response.Write("selected")%>> Pisos Laminado </option>
 <option value="2" <%If Rs("Tipo") = "2" Then Response.Write("selected")%>> Carpete </option>
 <option value="3" <%If Rs("Tipo") = "3" Then Response.Write("selected")%>> Tapete </option>
 <option value="4" <%If Rs("Tipo") = "4" Then Response.Write("selected")%>> Persiana </option>
 <option value="5" <%If Rs("Tipo") = "5" Then Response.Write("selected")%>> Cortina </option>
 </select>
 <br>
 <input type="button" value = "Gravar" onClick="GravaParte('<%=i%>','Tipo')">
 <input type="button" value = "Cancelar" onClick="Voltar('buttonsTipo<%=i%>','spanTipo<%=i%>')">
 </div>
 </td>

 <td class = "exc">
 <a href = "#" onClick="Exclui('<%=i%>','<%=Rs("Nome")%>')">
 <span id ="img<%=i%>">
 <img alt = "Excluir o Produto <%=Rs("Nome")%>" src="images/down.jpg" border="0"></a>
 </span>
 </td>
 </tr>

<% Rs.MoveNext Wend %>

 </tbody>
</table>

Bom, feita a tabela, vamos fazer a página que é responsável pela alteração:

AlteraForn.asp

<%
Response.AddHeader "Content-Type", "text/html; charset=iso-8859-1"

'Pego o nome do campo a ser alterado, passado pela função no AJAX
Campo = Request.QueryString("Campo")
'Pego o valor a ser colocado no campo acima
Valor = Request.QueryString("N")
'Pego o código do registro a ser alterado
Id = Request.QueryString("Id")

Set Conex = Server.CreateObject("ADODB.Connection")
Conex.Open "Driver={Microsoft Access Driver (*.mdb)}; DBQ=" & Server.MapPath("../Bd/Show.mdb")

'Monto a SQL de alteração e a executo
SQL = "UPDATE Tbl_Fornecedor SET " & Campo & " = '" & Valor & "' WHERE Cod = " & Id & ""
Set Rs = COnex.Execute(Sql)

'Chamo novamente a página que mostra a tabela já com as alterações realizadas
Response.Redirect("TabForn.asp")
%>

Agora vamos ao "principal", a página .JS que faz tudo isso acontecer:

ajaxForn.js

function GravaParteProd(cod,campo)
{

	xmlHttp=GetXmlHttpObject();
	var valor = document.getElementById(campo+cod).value;
	url="AlteraForn.asp";
	url = url + "?sid=" + Math.random();
	url = url + "&Id=" + cod;
	url = url + "&Campo=" + campo;
	url = url + "&Valor=" + valor;
	xmlHttp.onreadystatechange=alterou;
	xmlHttp.open("GET",url,true);
	xmlHttp.send(null);
	if (xmlHttp.readyState == 1) {
	document.getElementById("buttons"+campo+cod).innerHTML="<center><img src='loader.gif'> <br> <font face = 'verdana' color = 'CC0000' size = '2'> <b>Carregando...</b></font></center>";
}
}
function alterou()

{
if (xmlHttp.readyState==4 && xmlHttp.status == 200)
{

document.getElementById("tabela").innerHTML=xmlHttp.responseText;
}
}

function GetXmlHttpObject()

{

 if (window.XMLHttpRequest) {
 a=new XMLHttpRequest(); } //Objeto nativo (FF/Safari/Opera7.6+)
 else {
 try {
 a=new ActiveXObject("Msxml2.XMLHTTP"); //activeX (IE5.5+/MSXML2+)
 }
 catch(e) {
 try {
 a=new ActiveXObject("Microsoft.XMLHTTP"); //activeX (IE5+/MSXML1)
 }
 catch(e) { /* O navegador não tem suporte */
 a=false;
 }
 }
 }
 return a;
 }

Esta ai a nossa "Grande" função AJAX q faz essa alteração..

Bom, por hoje é só. Espero que tenham gostado e que isso possa ajudar alguém.

Abraços....