Lavora con noi

JavaScript

Siti tematici

Speciali

Ajax

JavaScript » Articoli » Effetti e controlli Javascript

RSS

Testo editabile con Scriptaculous

di: Alvin Laini 27 Ottobre 2008

Se avete già avuto a che fare con un wiki, saprete sicuramente che il punto forte di un sistema del genere sta nel fatto che chiunque può collaborare all'approfondimento di un dato argomento modificando o aggiungendo contenuti alla pagina web.

Script.aculo.us ci mette a disposizione un oggetto, Ajax.InPlaceEditor, che rende molto facile definire come modificabile il testo contenuto in una pagina web; questo oggetto gestisce le modifiche tramite delle richieste Ajax.

La pagina web che prenderemo in esame in questo articolo visualizzerà un semplice testo generato dal servizio web Lorem Ipsum e permetterà agli utenti di modificare il testo visualizzato. Ecco l'esempio (le modifiche non sono visibili sulla pagina in quanto non è implementata la parte server-side). Tutti il codice usato è contenuto in questo file zip.

Vediamo in breve i passaggi chiave che andremo poi ad approfondire nel codice:

Quando l'utente sposterà il cursore all'interno del paragrafo, esso verrà evidenziato in giallo. Se l'utente a quel punto cliccherà su di esso, verrà trasformato in una textarea.
Quando l'utente cliccherà sul bottone “Ok”, una richiesta Ajax invierà il contenuto della textarea al server. Altrimenti, se l'utente cliccherà sul bottone “Cancel” la textarea sparirà e non verrà inviata alcuna richiesta lato server.
Il server, al ricevimento del nuovo testo tramite l'oggetto Ajax.InPlaceEditor, deciderà se visualizzarlo o meno applicando i dovuti filtri (parole offensive etc...).
Se tutto andrà a buon fine la modifica sarà subito visibile in pagina.

Consideriamo ora il codice HTML della pagina web sotto riportato e l'associato Javascript:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <title>Abilitazione alla modifica da parte degli utenti del testo di una pagina web</title>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <link rel="stylesheet" type="text/css" href="css/stile.css" media='screen'>
 </head>
 <body>
  <div id='contenitore'>
  <h3 class="titolo">Testo Editabile</h3>
  <p class="testo" id='editText'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
Nullam rutrum eros non neque. In a magna et velit auctor pellentesque. 
Nam est libero, consectetuer quis, condimentum ut, pellentesque sed, lectus. 
......</p>
 </div>								 


 <script  src="prototype.js" type="text/javascript"></script>
 <script  src="scriptaculous.js" type="text/javascript"></script>
 <script type="text/javascript">
  window.onload=function(){
   	new Ajax.InPlaceEditor('editText', 'nonEsiste.php',{rows:15,
   	cols:50, cancelControl:'button', okText:'Salva',
    cancelText:'Annulla', savingText:'Salvataggio in corso...',
    clickToEditText:'Clicca per modificare', formId:'value'	
});
  }
 </script>
 </body> 
</html>

Il testo che vogliamo rendere modificabile verrà inserito in un tag <p> con un dato attributo id="editText".

Ecco l'oggetto della libreria Script.aculo.us che si occuperà di gestire la modifica.

 window.onload=function(){
 new Ajax.InPlaceEditor('idElemento', 'paginaLatoServer',{rows:15,
   cols:50, cancelControl:'button', okText:'Salva',
   cancelText:'Annulla', savingText:'Salvataggio in corso...',
   clickToEditText:'Clicca per modificare', formId:'value'
});

Il codice sopra riportato specifica nell'ordine, l'id dell'elemento abilitato alle modifiche (editText), l'URL relativo al componente server a cui viene inviata la richiesta HTTP e alcuni parametri che modificheranno il comportamento del componente Javascript:

Rows: Specifica l'altezza delle righe del campo di input (se è maggiore di 1 verrà usata una textarea come campo di input).
Cols: Specifica il numero delle colonne di una textarea.
CancelControl: Specifica la modalità di visualizzazione dell'elemento “Cancel” (button, link, false).
OkText: Modifica l'attributo “Value” dell'elemento che si occuperà di fare il submit del testo lato server.
CancelText: Specifica il testo che sarà visualizzato dal parametro “cancelControl”.
SavingText: Specifica il testo che sarà visualizzato durante l'invio dei dati al server.
ClickToEditText: Specifica il testo che sarà visualizzato durante l'onMouseOver sul testo editabile.
FormId: Specifica il nome della variabile che conterrà il risultato della modifica. In altre parole, la stringa di query della richiesta Ajax inviata al server quando l'utente cliccherà sul bottone “Salva”.