Script ajax: Edit in place e modifica dati in loco
difficoltà:
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:
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">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...)
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>
La struttura del file update.php sarà più o meno di questo tipo:
<?Chiaramente se si usa asp il file sarà update.asp
// 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";
}
?>
Permalink:
Tag:
Script Simili:
Script php: Applicare una funzione a tutti i dati ricevuti via get o post
Script ajax: Drag and drop con scriptaculous e salvataggio posizione
Script javascript: Passare dati da popup a pagina principale
Script php: Leggere file xls di excel con php
Link utili:
Vota:
Commenti
16/10/2006 9:13:05
Aggiunto tra i link utili.
26/10/2006 22:05:45
Bella, io l'ho fatto un pochino differente :)
25/3/2007 1:03:10
scusa se ti disturbo, mi chiedevo, se volessi esitare un testo prendendo il valore da una select?
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+"\')\">";
}
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
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??
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
23/12/2008 17:01:14
Fantastico ! Funziona con le textbox e lo sto adattando per la select. Un must questo script !
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
Feed Rss
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/