Edição Rapida (AJAX)

[frankikos 0]

Olá....usei o script, adapitei para minha necessidade.......mas com fazer com textarea?? ou por exemplo, dar varias linhas no imput??

Essa é minha grande duvida...

 

Abraços e parabéns pelo codigo!

[adsoncs 0]

Estou com o seguinte problema...

 

no meu banco o campo id está em maiusculo e assim PF_ID.

está chamando certinho mas nao fica clicavel a edição, ou seja

acho que o .js tambem precisa ser configurado mas com farei isso:

assim?

 

Codigo atual

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=\"50\"type=\"text\" value=\"" + atual.innerHTML + "\" size=\"20\" onkeypress=\"return enter(this, event," + nn + "," + pf_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.php?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.php?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;
        }
}

Coloquei assim mas nao deu certo...

 

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, pf_id_usuario, nome_campo) {
        elem = document.getElementById("campo" + nn);
        elem.innerHTML = "<input maxlength=\"50\"type=\"text\" value=\"" + atual.innerHTML + "\" size=\"20\" onkeypress=\"return enter(this, event," + nn + "," + pf_id_usuario +", '"+ nome_campo + "')\" onblur=\"return semfoco(this," + nn + "," + pf_id_usuario +", '"+ nome_campo + "')\" />";
        elem.firstChild.focus();
}

function enter(campo, evt, idfld, pf_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.php?id=' + pf_id_usuario + "&campo="+ nome_campo + "&valor=" + campo.value, "POST", false);
                elem.innerHTML = "<span onclick=\" editar(" + idfld + ", this," + pf_id_usuario +", '"+ nome_campo + "');\">" + campo.value + "</span>";

                return false;
        } else {
                return true;
        }
}

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

 

Valeu pela ajuda e abração!

[porao 0]

Muito legal!

E nao da pra usar o JQUERY?

[Dee 0]

Bom... Arrumei o que eu tava querendo.

Mas tipo, depois que eu altero, as palavras com acentos, vem tudo diferente... comofas pra resolver ?? Preciso por o Header Content-Type no PHP ?

 

E outra, se eu clico de novo no campo, com ele ja clicado ele da um erro e aparece outro campo com os eventos dentro do campo... :S

 

 

RESOLVIDO, TROQUEI REQUEST POR GET

[Dee 0]

Mas agoar tenho outro problema, quando eu clico no campo que quero editar ele abre o textbox, mas se eu clico de novo abre outro, se eu clico de novo abre outro. =\

[Jefferson Saavedra 0]

também estou com o mesmo problema aparece tudo direitinho mas quando dou enter ou tab ele simplesmente não atualiza no bd. O que eu faço???

[Jefferson Saavedra 0]

Olá pessoal achei o problema estava faltando fechar uma chave no script. Segue o código completo para quem precisar como eu.

 

ajax.js

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=UTF-8");
                        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;
}

O restante que foi postado no começo pelo Fabyo está certo. Abraço a todos pessoal.

[Dee 0]

Jefferson, esse script que você alterou aí, muda em que ? Não vi diferença e eu continuo com o mesmo problema.

Eu clico pra alterar, aparece o textbox, se eu do outro clique dentro do textbox, abre outro encima com uns codigos dentro, de la do funcoes.js.

 

Nao consegui achar o erro.

[Fabyo 66]

Dee apesar desse meu sisteminha ser de janeiro de 2006, eu peguei ele de novo e testei e funcionou normal no Firefox e Chrome

 

hoje nao uso mais esse esquema, uso extjs ou Jquery, se alguem quiser algum exemplo com eles só falar que eu posto aqui.

[Dee 0]

Se for possível, posta por favor.

[Fabyo 66]

Criei um exemplo usando Jquery com o plugin Jeditable

 

edicao.zip

 

para mais detalhes:

 

plugin e exemplos:

http://www.appelsiini.net/projects/jeditable

 

site jquery:

http://jquery.com/

 

manual jquery:

http://visualjquery.com/

http://docs.jquery.com/Main_Page

 

exemplos:

http://jqueryui.com/