[Resolvido] Clique Input Ajax

[Patrique 0]

Fala ae pessoal, vou passar agora para vocês um sisteminha simples porém bem útil que eu chamo de clique input.

 

Para entenderem vejam só um exemplo que eu estou disponibilizando online para ver o demo.

 

Clique sobre os texto e modifiquem o conteúdo, pois é so clicar "enter" do teclado que o sistema irá efetuar a atualização por ajax.

 

http://migre.me/5wbr

 

Abaixo colocarei os codes necessário para rodar o sistem.

 

Primeiro crie um arquivo access chamado patriquegostosao.mdb, neste banco você cria uma tabela chamada usuarios nesta tabela você cria 4 colunas sendo que a primeira será a coluna id coloque-a como chave primária e numeração automática, depois crie a segunda coluna que devera se chamar nome, depois crie a terceira coluna e aplique o nome desta coluna de sobrenome e por fim crie a última coluna que deverá se chamar idade.

 

Feito isso chegou a hora de criar os arquivos javascripts.

 

Crie o primeiro arquivo .js que deverá se chamar ajax.js

 

Coloque nele o seguinte code

 

function ajax() {};
ajax.prototype.iniciar = function() {

    try{
        this.xmlhttp = new XMLHttpRequest();
    }catch(ee){
        try{
            this.xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
        }catch(e){
            try{
                this.xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }catch(E){
                this.xmlhttp = false;
            }
        }
    }
    return true;
}

ajax.prototype.ocupado = function() {
    estadoAtual = this.xmlhttp.readyState;
    return (estadoAtual && (estadoAtual < 4));
}

ajax.prototype.processa = function() {
    if (this.xmlhttp.readyState == 4 && this.xmlhttp.status == 200) {
        return true;
    }
}

ajax.prototype.enviar = function(url, metodo, modo) {
    if (!this.xmlhttp) {
        this.iniciar();
    }
    if (!this.ocupado()) {
        if(metodo == "GET") {
            this.xmlhttp.open("GET", url, modo);
            this.xmlhttp.send(null);
        } else {
            this.xmlhttp.open("POST", url, modo);
            this.xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=iso-8859-1");
            this.xmlhttp.setRequestHeader("Cache-Control", "no-store, no-cache, must-revalidate");
            this.xmlhttp.setRequestHeader("Cache-Control", "post-check=0, pre-check=0");
            this.xmlhttp.setRequestHeader("Pragma", "no-cache");
            this.xmlhttp.send(url);
        }

        if (this.processa) {
            return unescape(this.xmlhttp.responseText.replace(/\+/g," "));
        }
    }
    return false;
}

Agora crie o segundo arquivo .js, ele deverá se chamar funcoes.js

 

Coloque nele o seguinte code

 

function teste(url, metodo, modo)
{
    var campo = document.getElementById('form1').texto.value;
    remoto    = new ajax();
    envia     = remoto.enviar(url + "?" + "texto=" + campo, metodo, modo );
    document.getElementById("conteudo").innerHTML = envia;
}

function editar(nn, atual, id_usuario, nome_campo) {
    elem = document.getElementById("campo" + nn);
    elem.innerHTML = "<input maxlength=\"20\"type=\"text\" value=\"" + atual.innerHTML + "\" size=\"24\" onkeypress=\"return enter(this, event," + nn + "," + id_usuario +", '"+ nome_campo + "')\" onblur=\"return semfoco(this," + nn + "," + id_usuario +", '"+ nome_campo + "')\" />";
    elem.firstChild.focus();
}

function enter(campo, evt, idfld, id_usuario, nome_campo) {

    evt = (evt) ? evt : window.event;
    if (evt.keyCode == 13 && campo.value!="") {
        elem = document.getElementById("campo" + idfld);
        xmlhttp  = new ajax();
        xmlhttp.enviar('salvar.asp?id=' + id_usuario + "&campo="+ nome_campo + "&valor=" + campo.value, "POST", false);
        elem.innerHTML = "<span onclick=\" editar(" + idfld + ", this," + id_usuario +", '"+ nome_campo + "');\">" + campo.value + "</span>";

        return false;
    } else {
        return true;
    }
}

function semfoco(campo, idfld, id_usuario, nome_campo) {
    if (campo.value!="") {
        elem = document.getElementById("campo" + idfld);
        xmlhttp = new ajax();
        xmlhttp.enviar('salvar.asp?id=' + id_usuario + "&campo="+ nome_campo + "&valor=" + campo.value, "POST", false);
        elem.innerHTML = "<span onclick=\" editar(" + idfld + ", this," + id_usuario +", '"+ nome_campo + "');\">"
        elem.firstChild.innerHTML = campo.value;
        return false;
    }
}

Pronto, os arquivos .js foram criados agora será necessário criar os arquivos .asp que neste caso serão 2

 

O primeiro arquivo .asp deverá se chamar salvar.asp

 

Coloque nele o seguinte code

 

<%
Response.Charset="ISO-8859-1"

Function RemoveHTMLTags(sIn)
        Dim nCharPos, sOut, bInTag, sChar
        sOut = ""
        bInTag = False
        For nCharPos = 1 To Len(sIn)
                sChar = Mid(sIn, nCharPos, 1)
                If sChar = "<" Then
                        bInTag = True
                End If
                If Not bInTag Then sOut = sOut & sChar
                If sChar = ">" Then
                        bInTag = False
                End If
        Next
        RemoveHTMLTags = sOut
End Function

id    = REQUEST("id")

campo = request("campo")
valor = request("valor")


set cn = Server.CreateObject("ADODB.Connection")
cn.provider = "Microsoft.Jet.OLEDB.4.0"
cn.connectionstring = Server.MapPath("dados.mdb")
cn.open

sql = "Update usuarios set "&RemoveHTMLTags(campo)&"='"& RemoveHTMLTags(valor)&"' where id="&id
response.write sql

cn.execute(sql)
%>

E por fim você deverá criar o segundo arquivo .asp, que neste caso deverá se chamar index.asp

 

Coloque nele o seguinte code

 

<% Response.Charset="ISO-8859-1" %>
<html>
<head>
<meta http-equiv="Content-Type"  content="application/xhtml+xml; charset=iso-8859-1" />
<script src="ajax.js" type="text/javascript"></script>
<script src="funcoes.js" type="text/javascript"></script>
<title>lista usuarios</title></head>
<body>
<table width="600" border="1" bordercolor="#CCCCCC" align="center">
  <tr>
    <th bgcolor="#f5f5f5" height="30">NOME</th>
    <th bgcolor="#f5f5f5" width="200">SOBRENOME</th>
    <th bgcolor="#f5f5f5" width="200">IDADE</th>
  </tr>
<%
set cn = Server.CreateObject("ADODB.Connection")
cn.provider= "Microsoft.Jet.OLEDB.4.0"
cn.connectionstring = Server.MapPath("dados.mdb")
cn.open

sql = "select * from usuarios"
set rs = cn.execute(sql)

i = 1
while not rs.eof
    id        = rs("id")
    nome      = rs("nome")
    sobrenome = rs("sobrenome")
    idade     = rs("idade")

    Response.Write("<tr>")
    Response.Write("<td height='27'> <span title=""clique aqui para editar"" id='campo" & i & "'><span onclick=""editar(" & i & ",this," &id& ",'nome');"">" & nome & "</span></span></td>" )
    i = i+1
    Response.Write("<td> <span title=""clique aqui para editar"" id='campo" & i & "'><span onclick=""editar(" & i & ",this," &id& ",'sobrenome');"">" & sobrenome & "</span></span></td>")
    i = i+1
    Response.Write("<td align=""center""> <span title=""clique aqui para editar"" id='campo" & i & "'><span onclick=""editar(" & i & ",this," &id& ",'idade');"">" & idade & "</span></span></td></tr>")
    i = i+1
    rs.movenext
wend
rs.close
set rs = nothing
cn.close
%>
</table>
</body>
</html>

No mais é isso, fiquem a vontade para modificar e fazer melhorias no sistema.

 

[]'s