Visualisation d'une page Webjax
Ajax.InPlaceEditor ()
L'objet Ajax.InPlaceEditor() donne accès une fonctionnalité de taille, l'édition en place de données ou en anglais "in place editing".
Cette édition en place de données permet par exemple une modification rapide des informations d'un formulaire sans devoir recharger la page ce qui visuellement est moins troublant pour l'utilisateur.
Cette page présente des exemple d'utilisations de cet objet Ajax.InPlaceEditor.
Exemple d'utilisation de Ajax.InPlaceEditor
Cet exemple vous permet de faire varier la valeur des options passées à l'objet Ajax.InPlaceEditor.
Une fois votre paramétrage établi (ndr : vous pouvez utiliser celui par défaut), vous pouvez tester l'édition en place
sur les champs après.
toto président, toto président, webjax c'est bien, webjax c'est bien
On peut noter, en complément aux remarques déjà précisées dans la page Ajax.InPlaceEditor(class), que
le fait de préciser un élément DOM dans l'option 'externalControl' permet en quelquesorte, "d'attacher" cet élément
DOM à l'évènement MouseOver qui est de base n'est présent que sur l'élément DOM à rendre éditable.
Exemple d'utilisation actif de Ajax.InPlaceEditor()
Cet exemple présente à partir d'un élément DOM déjà défini pour l'édition en place,
de tester en mode "réel" l'édition en place.
L'exemple est testable ci après. Le serveur est chargée de renvoyer la valeur
que vous avez saisi afin de la conserver.
Vous pouvez tapper "bonjour" pour avoir un retour différent ;-).
Notons que cet exemple permet d'autovalidé la valeur saisie dès que la champ éditable perd le focus (cf :
problèmes possibles d'interprétation de Javascript dans le premier exemple de cette page).
éditez moi
Le code source de l'exemple est recopié ci après avec dans l'ordre :
- le code HTML de la zone rendue éditable en place par Ajax.InPlaceEditor
- le code Javascript inséré dans la page pour rendre éditable l'élément DOM
- le code PHP super simple du fichier serveur gérant le renvoi de valeur
Le code HTML :
Le code Javascript :
Le code PHP :
Nous pouvons noter suite a la prise de connaissance de l'extrait de code PHP,
que le nom du paramètre passé en 'HTTP_POST' est 'value'.
Cette édition en place de données permet par exemple une modification rapide des informations d'un formulaire sans devoir recharger la page ce qui visuellement est moins troublant pour l'utilisateur.
Cette page présente des exemple d'utilisations de cet objet Ajax.InPlaceEditor.
Exemple d'utilisation de Ajax.InPlaceEditor
Cet exemple vous permet de faire varier la valeur des options passées à l'objet Ajax.InPlaceEditor.
Une fois votre paramétrage établi (ndr : vous pouvez utiliser celui par défaut), vous pouvez tester l'édition en place sur les champs après.
toto président, toto président, webjax c'est bien, webjax c'est bien
On peut noter, en complément aux remarques déjà précisées dans la page Ajax.InPlaceEditor(class), que le fait de préciser un élément DOM dans l'option 'externalControl' permet en quelquesorte, "d'attacher" cet élément DOM à l'évènement MouseOver qui est de base n'est présent que sur l'élément DOM à rendre éditable.
Exemple d'utilisation actif de Ajax.InPlaceEditor()
Cet exemple présente à partir d'un élément DOM déjà défini pour l'édition en place, de tester en mode "réel" l'édition en place.
L'exemple est testable ci après. Le serveur est chargée de renvoyer la valeur que vous avez saisi afin de la conserver.
Vous pouvez tapper "bonjour" pour avoir un retour différent ;-).
Notons que cet exemple permet d'autovalidé la valeur saisie dès que la champ éditable perd le focus (cf : problèmes possibles d'interprétation de Javascript dans le premier exemple de cette page).
éditez moi
Le code source de l'exemple est recopié ci après avec dans l'ordre :
- le code HTML de la zone rendue éditable en place par Ajax.InPlaceEditor
- le code Javascript inséré dans la page pour rendre éditable l'élément DOM
- le code PHP super simple du fichier serveur gérant le renvoi de valeur
Le code HTML :
Le code Javascript :
Le code PHP :
Nous pouvons noter suite a la prise de connaissance de l'extrait de code PHP, que le nom du paramètre passé en 'HTTP_POST' est 'value'.
: 10/01/2007 03:20:47 | 
: Scriptaculous, Scriptaculous.js, Ajax, Ajax.InPlaceEditor, InPlaceEditor, édition, en, place, de, données, inplaceeditor, inplaceediting, exemple, utilisation, 
