Aller au contenu
Télécharger Firefox 2

AJAX : Création de zone d'édition

ExtrArea

Description de la classe

ExtrArea est une classe permettant de rendre des zones de textes éditables lorsque l'on clique sur ces derniers. Les données validées peuvent alors être transmises en arrière plan à un script serveur sans soumission de formulaire. Cette classe fait usage du DOM et du Design Pattern Singleton.

Cette classe fonctionne obligatoirement avec XHRConnection que vous devrez également inclure à vos pages.


Accès Méthode
public ref ExtrArea ()

Constructeur
public boolean buildExtrArea ( string pcontainer, string ptag, string maction)

Modifie le comportement des zones ciblées afin de les rendre éditables au clic de la souris. Afin de déterminer les zones il faut définir :
  • scontainer :
    Identifiant de la balise (de formulaire par exemple) contenant les balises à capturer
  • stag :
    Balise à capturer et dont le contenu doit être éditable
  • saction :
    Nom du script serveur qui traitera les informations sauvegardées. Si vous ne renseignez pas ce paramètre, seul le mode édition fonctionnera, il n'y aura pas de soumission de données.
private boolean setEditable ( string id,  string saction)
boolean setClickable ( string id,  string saction)
boolean accept ( string id,  string saction)
boolean cancel ( string id,  string data,  string saction)
boolean sendData ( string id,  string data,  string saction)

Deux variables externes sont également indispensables. Il s'agit de imgCancel et imgAccept qui détermine l'url vers les images affichées.

Usage

Soit le code HTML ci-dessous :

<form name="formTest" id="formTest" method="post" action="">
	<div>
		<span id="test1">Zone de texte numéro 1</span>
		<br />
		<span id="test2">Zone de texte numéro 2</span>
	</div>
</form>

et le code Javascript suivant :

window.onload = function() {
	// Paramétrage des images
	imgCancel = '/img/cancel.png';
	imgAccept = '/img/accept.png';
	
	// Création d'un objet ExtrArea
	p = new ExtrArea();
	
	// On désigne le formulaire comme conteneur 
	// On saisie les zones entre span comme étant éditable
	// On envoie pas de paramètre saction car on fait juste un test d'édition, sans soumission
	p.buildExtrArea('formTest', 'span');
}

Nous obtenons :

Zone de texte numéro 1
Zone de texte numéro 2

Téléchargement

Notes

Si vous voulez rendre plusieurs zones éditables, il suffit d'appeller autant de fois que nécessaire la méthode buildExtrArea en désigant les zones concernées.
Selon vos besoins, il peut être utile de modifier une ou deux méthodes. Je pense en particulier aux formulaires permettant d'éditer des fiches produits, personnes ... Et n'oubliez pas, il faut toujours prévoir une soumission de formulaire "classique".

Thanh, le 31 Décembre 2005

Rechercher un billet

Sous Rubriques

Photo Pif

Photopif