Edition instantanné d'un champ texte.

**midoENSI** · 25/05/2007, 12h06

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.

**CPI_en_mousse** · 25/05/2007, 12h14

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.

**OButterlin** · 25/05/2007, 12h21

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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+

**djo.mos** · 25/05/2007, 12h23

Encore plus simple : à l'aide de JavaScript !

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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é !

**CPI_en_mousse** · 25/05/2007, 12h24

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

**midoENSI** · 25/05/2007, 13h03

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+

**remika** · 25/05/2007, 13h06

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.

**djo.mos** · 25/05/2007, 13h11

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

document.getElementById('unId')

par des

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

document.getElementsByName('unNom')[0]

et ce uniquement pour les tags de struts.

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

ce qui devient

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<html:text property="XXXX" style="..." />

et dans la fonction javaScript, j'ai mis :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

ce qui devient

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
document.getElementsByName('XXXX')[0].style.display='';
etc.

Voili voilou !

**OButterlin** · 25/05/2007, 14h22

Envoyé par CPI_en_mousse

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

J'avais mis l'explication en dessous

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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+

**midoENSI** · 26/05/2007, 13h17

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

Edition instantanné d'un champ texte.

Servlets/JSP Java

Vue hybride

Discussions similaires

Partager

Partager