 |
|
AJAX e Classic ASP - modifica il testo al volo |
 |
Contribuito da : Sergio
il Mercoledì 15 marzo 2006 alle 10:17:20
(Articolo letto 3672 volte) |
|
|
|
Prosegue il viaggio nell'utilizzo di AJAX applicato a Classic ASP.
Questa volta utilizzeremo la libreria (o framework) Prototype per avere un effetto molto interessante: la possibilità di modificare al volo un testo dopo averci cliccato sopra.
Il tutto in una normale pagina HTML.
Ecco un esempio funzionante.
Vediamo i pochi passi per mettere su questo effetto.
Dopo esservi scaricati l'ultima versione di Prototype scaricate anche il javascript che ci servirà per l'esempio specifico.
Includiamo i javascript nella pagina con le solite istruzioni
---------------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it" lang="it">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Modifica testo al volo</title>
<link href="editinplace.css" rel="Stylesheet" type="text/css" />
<script src="prototype.js" type="text/javascript"></script>
<script src="editinplace.js" type="text/javascript"></script>
</head>
<body>
<h1>Modifica testo al volo</h1>
<p id="desc">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</body>
</html>
---------------------------------------------------------
l'id del paragrafo sarà quello che abbiamo indicato nel js 'editinplace.js' come editabile.
Una volta cliccato sul testo da modificare il paragrafo si trasformerà in una textarea. In più ci saranno due pulsanti per il submit e per il cancel.
Il testo modificato lo invio, in questo caso, ad una pagina ASP, 'scrivi.asp', che semplicemente raccoglie il contenuto della textarea e la stampa a video
---------------------------------------------------------
<%
id = Request("id")
contenuto = Request("content")
Response.Write(contenuto)
%>
---------------------------------------------------------
Questo è tutto. E' chiaro che in questo caso il cambiamento non è permanente e che un reload della pagina provoca un ritorno alle condizioni iniziali.
Sergio Gandrus
www.sergiogandrus.it
| | | |
|
