Script ajax: Edit in place e modifica dati in loco

   difficoltà:  script script script script script

Download
Script simili
12/10/2006


Lo script presentato è un esempio base che mostra come poter realizzare in ajax un sistema "Edit in place", cioè la modifica di dati di un form senza dover cambiare pagina. Il sistema permette di aggiornare uno alla volta i campi di un form senza dover far cambiare pagina all'utente, utile in particolare se si prevede che l'utente possa avere la necessità di editare una sola voce del form, continuando a lavorare sulla pagina in questione.
Il form è formato dall'elenco delle voci modificabili, cliccando sulla voce da modificare compare un input text che permette la modifica della voce. Cliccando su ok la voce verrà modificata direttamente andando a creare la query che effettuerà l'aggiornamento direttamente sul database.

Vediamo degli screenshot esplicativi del funzionamento:

ajax - edit in place

ajax - edit in place

ajax - edit in place

ajax - edit in place

Vediamo cosa accade nel file modifica_dati.html.
Cliccando sulla voce da modificare si richiama la funzione
change(this,campo);
this passa alla funzione i dati relativi al link e campo è allo stesso tempo il nome del campo e l'id del contenitore (div). La funzione riscrive il contenuto del div mostrando un input di testo il cui contenuto è il valore da cambiare (link.innerText o link.text a seconda che usiamo firefox o ie).
Dato l'ok al testo modificato viene richiamata la funzione makeRequest che usando ajax fa una richiesta asincrona alla pagina update.php passandogli via post il nome del campo da aggiornare e il valore assegnato.
Questa pagina si occuperà di effettuare le operazioni sui dati ricevuti: aggiornare il database o altro. La pagina restituisce un output positivo se l'operazione è riuscita o negativo se presenta errori.

Ecco il file modifica_dati.html:
<script type="text/javascript" language="javascript">
var http_request = false;

function makeRequest(getvar) {

http_request = false;
if (window.XMLHttpRequest) { // Mozilla, Safari,...
http_request = new XMLHttpRequest();
if (http_request.overrideMimeType) {
//http_request.overrideMimeType('text/xml');
// See note below about this line
}
} else if (window.ActiveXObject) { // IE
try {
http_request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
http_request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}

if (!http_request) {
alert('Giving up :( Cannot create an XMLHTTP instance');
return false;
}
http_request.onreadystatechange = function(){
scrivi(getvar);
}
http_request.open('POST', 'update.php', true);
http_request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
postvar="campo="+getvar+"&value="+eval("document.forms.dinamicform."+getvar+".value");
http_request.send(postvar);

}

function scrivi(getvar) {

if (http_request.readyState == 4) {
if (http_request.status == 200) {
document.getElementById(getvar).innerHTML = "<a href=\"javascript:void(null);\" onclick=\"change(this,'"+getvar+"')\">"+eval("document.forms.dinamicform."+getvar+".value")+"</a>";
document.getElementById("result").innerHTML = http_request.responseText;
} else {
alert('There was a problem with the request.');

}
}

}
function change(link,textname){
//link.innerText e link.text sono stessa cosa, c'è differenza tra ie e firefox
if(link.innerText){testovecchio=link.innerText}else{testovecchio=link.text}
//riscrivo il contenuto del div
document.getElementById(textname).innerHTML="<input type='text' name='"+textname+"' value='"+testovecchio+"'> <input type='button' value='ok' onclick=\"makeRequest(\'"+textname+"\')\">";
}
</script>
<form name="dinamicform">
Nome:
<div id="nome"><a href="javascript:void(null);" onclick="change(this,'nome')">Pippo</a></div>
Cognome:
<div id="cognome"><a href="javascript:void(null);" onclick="change(this,'cognome')">Rossi</a></div>
Indirizzo:
<div id="indirizzo"><a href="javascript:void(null);" onclick="change(this,'indirizzo')">via Taldeitali 7</a></div>
Città:
<div id="citta"><a href="javascript:void(null);" onclick="change(this,'citta')">Milano</a></div>
Data nascita:
<div id="nascita"><a href="javascript:void(null);" onclick="change(this,'nascita')">18/10/1972</a></div>
</form>
<br/>
<br/>
<div id="result"></div>
Il file update.php come detto effettua le operazioni di update sul database o altre operazioni sui dati ricevuti. Non scrivo tutte le operazioni di update e controllo dei dati che dipenderanno dal linguaggio lato server usato (asp, php..) e dal tipo di database (access, mysql...)

La struttura del file update.php sarà più o meno di questo tipo:
<?
// prelevo dati dal form
$campo=$_POST['campo'];
$value=$_POST['value'];

/*
QUI ESEGUO OPERAZIONI DI CONTROLLO DATI:
- CONTROLLO ESISTENZA CAMPO
- CONTROLLO INPUT (stripslashes etc)

*/

// compongo la query
$query="update tabella set $campo = '$value'";

/*
QUI ESEGUO OPERAZIONI SU DATABASE:
- CONNESSIONE
- ESECUZIONE QUERY
*/
$operazione_ok=1; //se aggiornamento ok e dati inviati ok $operazione_ok=1 altrimenti $operazione_ok=0

// output di ritorno se operazione ok positiva se no ritorno errore
if($operazione_ok==1){
echo "OPERAZIONE: $campo cambiato in $value<br>QUERY: $query";
}else{
echo "Errore";
}
?>
Chiaramente se si usa asp il file sarà update.asp




Commenti


  Folletto Malefico

15/10/2006 23:42:43

Leggendo questo, posso permettermi di linkarti una classe JavaScript che ho realizzato tempo fa proprio per eseguire l'editing in-place dei testi?

Si chiama inWriter:
http://digitalhymn.com/argilla/inwriter/

  Fabio

16/10/2006 9:13:05

Aggiunto tra i link utili.

  Silvio

26/10/2006 22:05:45

Bella, io l'ho fatto un pochino differente :)

  Antonio

25/3/2007 1:03:10

scusa se ti disturbo, mi chiedevo, se volessi esitare un testo prendendo il valore da una select?

  Fabio

25/3/2007 12:52:40

@Antonio:
Al posto di una riga tipo:


<a href="javascript:void(null);" onclick="change(this,'citta')">Milano</a>

puoi chiamare un'altra funzione tipo:

<a href="javascript:void(null);" onclick="changeselect(this,'citta')">Milano</a>

e aggiungi una funzione del tipo:

function changeselect(link,selectname){
//link.innerText e link.text sono stessa cosa, c'è differenza tra ie e firefox
if(link.innerText){testovecchio=link.innerText}else{testovecchio=link.text}
//riscrivo il contenuto del div
document.getElementById(selectname).innerHTML="<select name='"+selectname+"'><option value='Milano'>Milano</option><option value='Torino'>Torino</option></select> <input type='button' value='ok' onclick=\"makeRequest(\'"+selectname+"\')\">";
}


  maurizio

21/1/2008 15:58:27

nella funzione change(this,nome) posso passare(aggiungere) un'altro parametro? per esempio l'id della riga della tabella? Cioè non mi è molto chiaro il passaggio dei parametri..scusa l'ignoranza, ma sono inesperto di javascript.
Grazie

  Francesco

21/8/2008 17:32:20

Ho scaricato lo script..adattato alle mie pagine asp..ma la modifica me la permette di fare solo su di un campo,negli altri mi esce l'alert preimpostato che nn puo' procedere nell'upload...come mai?mi potete aiutare??

  giuseppe

22/8/2008 13:05:18

Ciao ragazzi, scusatemi ma zoppico un pochino con le query in mysql.
Dovrei utilizzare questo script per dare la possibilità di modificare il prodotto sul db.
Potreste aiutarmi con la query da aggiungere sul file update.php
Grazie mille

  Maurino

23/12/2008 17:01:14

Fantastico ! Funziona con le textbox e lo sto adattando per la select. Un must questo script !

  faber

27/1/2009 9:57:37

questo script è possibile usarlo con le jsp e al posto di un link statico come pippo, milano,ecc.. si potrebbe fare sul risultato di una query? ad esempio avendo un interrogazione su una tabella articoli vorrei poter modificare il prezzo come nell'esempio sopra

  giovanni

7/8/2010 21:21:44

Quando clicco su ok mi compare:

There was a problem with the request.

da cosa puo dipendere?

  Sergio

2/11/2010 18:00:40

complimenti per lo script.
Ho un problema nel passaggio dei valori in ASP (in php mi funziona tutto) non mi mantiene lo spazio tra le parole. Hai un'idea del motivo?
Grazie

  Sergio

9/11/2010 16:20:55

forse può essere utile a qualcuno...
per far scrivere anche lo spazio (in ASP) nel passaggio della variabile bisogna modificare questa riga:
postvar="campo="+getvar+"&value="eval("document.forms.dinamicform."+getvar+".value");
così:
postvar="campo="+getvar+"&value="+escape(eval("document.forms.dinamicform."+getvar+".value"));
ciao a tutti e ancora complimenti per lo script!!

  Giordano

10/11/2010 16:59:47

Grazie Sergio...avevo proprio questo problema!
Ora però ne ho un altro: se eseguo la procedura su un campo textarea funziona tutto perfettamente però non riesco a far passare gli a capo della textarea.
Come posso fare?
Grazie a tutti



Lascia un commento


Codice di controllo*:
Nome*:
Email/Link:
Testo*:
 
I campi contrassegnati con * sono obbligatori.