Guido Arata
a- a+

Modificare testo online direttamente dalla pagina del sito web

Come molti sapranno, è ormai "trappassato" ,nell' ottica del tanto discusso Web 2.0, il refresh dellepagine, sostituito con procedure in AJAX o DOM in grado dimodificare parte della pagina senza doverla ricaricarecompletamente. Ecco un esempio di una paginain AJAX, con QUIrelativa sorgente.

Come creare lo script

  1. Innanzitutto, scaricare il file InstantEdit 2.0 JS
  2. Creare un file aggiornato nel quale inserire i dati scritti dall' utente. Un esempio è consultabile QUI
  3. Aggiungere il codice javascript: 
      <script type="text/javascript" src="instantedit.js"></script>
  4. Impostare variabili statiche tramite le quali poter identificare la sessione in corso. Per far ciò serve il codice:

      <script type="text/javascript">setVarsForm("pageID=profileEdit&userID=11");</script>
     
  5. Ultima, ma non meno importante, cosa è inserire la tag <SPAN> a ciascun elemento editabile nella pagina. Esempio:

      <span id="userName" class="editText">John Doe</span>

     Nota: id corrisponde al nome del campo in questione

 

Analisi del codice

Tramite una semplice procedura in javascript si fannoanalizzare alla pagina tutti gli elementi aventiuna tag SPAN, e se ne trova uno aventeclass="editText" ed id uguale, si aggiunge unafunzione onclick; questa creerà un campo di testo o diinput (a seconda della dimensione del testo editabile)tramite la quale chiunque riuscirà a modificareil testo contenuto nella textarea. Quando il focus dall'elemento in questione verrà spostato altrove, siavvierà una richiesta XMLHttpRequest chefarà scrivere nel file creato in precedenza unanuova riga avente come contenuto ciò che èstato scritto nel campo di testo/di input creato per l'occasione + il nome del campo + ogni variabile nascostaimpostata. Verrà così aggiornato il database,il campo di testo sparirà ed il testo risulteràaggiornato.

Compatibilità

Lo script è compatibile con tutti i principalibrowsers: Internet Explorer, Firefox e Netscape.

Hacks carini

Se si avrà bisogno di forzare la creazione di unatextarea relativa ad un campo di testo (ad esempio pereditare un pezzo del codice HTML) bisognerà usare gliattributi class="editText"offsetHeight="10”.

Se invece si vuole abilitare la funzione di "modificaistantanea testo tramite textarea" solamente per undeterminato utente, l' attributo id del campo di testoandrà impostato così:id="edit_userID_$userID". A questo punto,conoscendo l' ID dell' utente bisogneràinserirlo nella variabile $userID.