Edition instantanné d'un champ texte.

Version imprimable

25/05/2007, 11h06
midoENSI

Edition instantanné d'un champ texte.

Bonjour,
Je souhaite savoir s'il y'a la possiblité de l'edition d'un texte statique dans une page JSP intantanément en une même page .c'est à dire que l'utilisateur clique sur un boutton "editer" -par exemple- le champs qui été statique devient un "textField" dans la même page.Ensuite, l'utilisateur saisi ses modification puis il valide.
Je pense que pour ses cas de figure L'Ajax est le plus idéale mes j'ai pas une grande conaissance a ce Framework.
Merci.
25/05/2007, 11h14
CPI_en_mousse

Salut,

tu peux aussi te servir de Javascript,

lors d'un evenement sur un bouton de type onclick(), ca appel une fonction Js qui change la valeur de readonly a false.

--------

Je pense que ton post n'est pas dans le bon forum, tu aurais du aller dans le forum html ou Js.

A priori, javascipt devrait suffire.
Je n'utiliserais pas (pour ma part) l'attribut readonly ou disabled d'un champ <textarea> mais plutôt un <div id='c1v'> avec le texte brut (pour l'affichage) et un <textarea id='c1e'> pour la mise à jour.
Ensuite, via un bouton et javascript, tu affiches l'un des 2 par
Code:

1 2 3 4 5 6 7 8 // Passage en mise à jour document.getElementById("c1v").style.display="none"; document.getElementById("c1e").style.display="block"; // Passage en visu document.getElementById("c1v").style.display="block"; document.getElementById("c1e").style.display="none";
Généralement, on veut voir tout le texte en visu. Avec le textarea, il y aura les scrollbars pour un texte long, ou alors une grosse zone avec 2 lignes...

A+

Encore plus simple : à l'aide de JavaScript !

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
<script language="javascript">
function updateMode(){
    document.getElementById('valId').style.display='none';
    document.getElementById('varId').style.display='';
 
    document.getElementById('varId').value = document.getElementById('valId').innerHTML;
 
    document.getElementById('modifId').style.display='none';
    document.getElementById('submitId').style.display='';
}
</script>
</head>
 
<body>
<table>
  <tr>
    <td>Nom</td>
    <td><div id="valId">midoENSI</div>
    <input id="varId" type="text" name="textfield"  style="display:none"/></td>
    <td><a href="#" id="modifId" onclick="updateMode()">modifier</a>
 
      <input id="submitId" type="submit" name="Submit" value="Appliquer"  style="display:none"/>
    </td>
  </tr>
</table>
</body>
</html>

Ce qui précède est un exemple complet (du simple HTML + JavaScript). Tu peux l'essayer tel quel pour comprendre le principe !

[EDIT]
Je viens de me rendre compte que OButterlin m'a devancé !

25/05/2007, 11h24
CPI_en_mousse

pourquoi tu n'utiliserai pas les attribut readonly ou disable??
25/05/2007, 12h03
midoENSI

Bonjour,
Merci à vous tous,
Juste je pose la question suivante: est ce que l'utilisation de ce javaScript est toujours valable pour le <html:text> et <html:submit> c'est à dire pour l' utlisation de Struts .
Je pose cette question parceque j'ai besoin de faire l'enregistrement de mes modifications dans une base de donnée.
Merci
A+
25/05/2007, 12h06
remika

Oui, ces balises cachent du code html (tu peux afficher la source de tes pages générées pour voir), donc pas de problème pour le Javascript.
25/05/2007, 12h11
djo.mos
Oui, absolument !
Il y'a juste un petit hic ! avec les tags de Struts, on ne peut pas spécifier d'identifiant au sens de HTML, or en utilise cet identifiant dans la fonction JavaScript.

La solution est la suivante :
dans la fonction JavaScript, remplacer les

Code:

document.getElementById('unId')

par des

Code:

document.getElementsByName('unNom')[0]

et ce uniquement pour les tags de struts.

J'explique :
Dans mon exemple précédent je mettais

Code:

<input id="submitId" type="submit" name="Submit" value="Appliquer" style="display:none"/>

ce qui devient
Code:

1 2 <html:text property="XXXX" style="..." />
et dans la fonction javaScript, j'ai mis :

Code:

document.getElementById('varId').style.display='';

ce qui devient
Code:

1 2 3 document.getElementsByName('XXXX')[0].style.display=''; etc.
Voili voilou !
25/05/2007, 13h21
OButterlin

Citation:

Envoyé par Modjo

Il y'a juste un petit hic ! avec les tags de Struts, on ne peut pas spécifier d'identifiant au sens de HTML, or en utilise cet identifiant dans la fonction JavaScript.

Si tu peux, il y a l'attribut styleId pour le faire

A+
25/05/2007, 13h22
OButterlin
Citation:

Envoyé par CPI_en_mousse

pourquoi tu n'utiliserai pas les attribut readonly ou disable??

J'avais mis l'explication en dessous
Code:

1 2 Généralement, on veut voir tout le texte en visu. Avec le textarea, il y aura les scrollbars pour un texte long, ou alors une grosse zone avec 2 lignes...
A+
26/05/2007, 12h17
midoENSI

ok merci à vous tous. Mon problème a été resolu.