smanettoni javascript help

[C.R.]

eh ma lo scopo è proprio non fare una form classica
voglio poter editare tutti i valori "on the fly" senza ricare la pagina
aggiornandoli però anche sul db

boh... anche a me onestamente pare una cosa dolorosamente inutile... per
editare sul db, ci sono php myadmin o webmin o simili...al limite, anche mysql a
riga di comando.... perchè doversi dannare per una cosa del genere...?

C.

[Lioz]

boh... anche a me onestamente pare una cosa dolorosamente inutile... per
editare sul db, ci sono php myadmin o webmin o simili...al limite, anche mysql a
riga di comando.... perchè doversi dannare per una cosa del genere...?

C.

eh ma è un'aaplicazione web, l'utente vede delle schede nel sito e deve anche poterle editare (con le dovute autorizzazioni)

mica si può collegare a phpMyadmin

[C.R.]

eh ma è un'aaplicazione web, l'utente vede delle schede nel sito e deve anche poterle editare (con le dovute autorizzazioni)

mica si può collegare a phpMyadmin

boh... sarà che io sono contrarissimo a far fare cose all'utente...(ciò
forse dipende anche da molti utenti che conosco) ... il massimo che egli
dovrebbe fare è qualche form qua e la e la pressione di qualche bottone-link...
secondo me già è troppo

Non gli permetterei MAI di immischiarsi nel mio db con tabelle online.

C.

[Lioz]

boh... sarà che io sono contrarissimo a far fare cose all'utente...(ciò
forse dipende anche da molti utenti che conosco) ... il massimo che egli
dovrebbe fare è qualche form qua e la e la pressione di qualche bottone-link...
secondo me già è troppo

Non gli permetterei MAI di immischiarsi nel mio db con tabelle online.

C.

si ma claudio, è una intranet web-based di una grossa azienda, dove ogni utente deve inserire, modificare dati...

la modifica lato utente è un pre-pre-pre requisito

[C.R.]

si ma claudio, è una intranet web-based di una grossa azienda, dove ogni utente deve inserire, modificare dati...

la modifica lato utente è un pre-pre-pre requisito

aaaaaaaahhhhhhh, allora si..... beh, anche in quel caso, ma non basta un tag
form, processato poi come te pare lato server ?!?

C.

[Lioz]

aaaaaaaahhhhhhh, allora si..... beh, anche in quel caso, ma non basta un tag
form, processato poi come te pare lato server ?!?

C.

si ma vuoi mettere?

con la tu asoluzione dovresti cliccare un link edit della scheda, compilare tutti i campi e schiacciare invia...qui con un clic modifichi tutto al volo, un po come fai sul titolo delle foto di flickr

[Lioz]

funziona!!!

http://www.signalkuppe.com/wp-content/editing/test.html


ora devo solo fare la chiamata ajax e siamo a posto!

[Lioz]

funzionaaaa

http://www.signalkuppe.com/wp-content/editing/test.html

ora dovrebbe reggere su tutti i passaggi, ecco il codice finale

// editing inline delle tabelle


/*

// al primo click di un elemento con classe edit
// circonda la tabella con un tag form e appendi i bottoni per l'invio ed il reset
// memorizza tutti i valori
// sostituisci gli span con un input con name pari all'id dello span e value pari al testo dello span
// all'invio della form fai una richiesta ajax e inviando name e value degli input sottoforma di una stringa
// ritorna il nuovo valore dell'elemento nel posto giusto
// al reset ripristina i valori non modificati


*/


$(document).ready(function(){


function memorizzaValori(){

vecchiValori = new Array();

$('.edit').each(function(i){

vecchiValori[i] = $(this).attr("id")+"|"+$(this).text();

});

return vecchiValori;

}


var cont = 0;

$('.edit').live('click',function(){

memorizzaValori();

idSpan = $(this).attr("id");
testoSpan = $(this).text();


cont++;

if(cont<=1){ // dopo il primo click appendi la form intorno alla tabella e aggancia il submit

$(this).parents("table").wrap("<form action=\"#\" id=\"update\"></form>");

$("<input type=\"reset\" id=\"resetta\" value=\"annulla\" onClick=\"annulla($(this));\" />").insertAfter($(this).parents("table"));
$("<input id=\"lancia\" type=\"submit\" value=\"salva i dati\" />").insertAfter($(this).parents("table"));


}


/* TO DO: size dell'input */

$(this).replaceWith("<input type=\"text\" name=\""+idSpan+"\" class=\"text\" size=\"35\" value=\""+testoSpan+"\" />");
// sotituisci il testo con un input con value pari al testo


}); // fine bind


$('#lancia').live('click',function(){

var padre = $(this).parents("form");
id= "#"+padre.attr("id")+" input.text";

dati = new Array();

$(id).each(function(i){


dati[i] = $(this).attr("name")+"|"+$(this).val();
$(this).replaceWith("<span id=\""+$(id).attr("name")+"\" class=\"\edit\">"+settaValori(dati, $(id).attr("name"))+"</span>");


})


$("<div class=\"esito\">Dati Aggiornati!</div>").insertAfter("#update").fadeOut(1500);
return false;

});



$('#resetta').live('click',function(){

padre = $(this).parents("form")
id= "#"+padre.attr("id")+" input.text"

$(id).each(function(){



$(this).replaceWith("<span id=\""+$(id).attr("name")+"\" class=\"\edit\">"+resettaValori($(id).attr("name"))+"</span>");


});

});



function resettaValori(riferimento){ // trova il testo dello span con id = riferimento nei vecchi valori

for ( var i=0, len=vecchiValori.length; i<len; i++ ){

if (vecchiValori[i].split('|')[0] == riferimento)
return (vecchiValori[i].split('|')[1]);
}

};


function settaValori(dati, riferimento){

// fai una richiesta ajax e invia i dati allo script lato sever
// aggiorna i nuovi valori e lascia inalterati gli altri

$.ajax({
type: "POST",
url: "http://www.signalkuppe.com/wp-content/editing/test.php",
data: "name="+dati+"",
success: function(html){

var temp = html.split(',') /* crea un array dei valori che torna lo script */

var posto = "#"+riferimento; /* appendi il valore nel posto giusto */

for ( var i=0, len=temp.length; i<len; i++ ){
if (temp[i].split('|')[0] == riferimento)
daRestituire = (temp[i].split('|')[1]);
}

$(posto).append(daRestituire); /* appendi il valore nel posto giusto */


}

});

return ""; /* non ritornare altro */

}


});

mancano solo due cose per renderla davvero figa:

1) dare la possibilità di cambiare la classe edit e l'id della form
2) calcolare i size dell'input in modo che matchino esattamente il testo

[C.R.]

bella, molto elegante

C.

[Lioz]

che pettine, ora toglie anche la form all'invio tutto senza mai ricaricare la pagina

inoltre i size degli input hanno un size pari al numero dei caratteri del testo che sostituiscono

http://www.signalkuppe.com/wp-conten...ing/test.html#