Discussion :

[littlebear]

Bonjour,
Je rencontre un problème dans le développement de ceci :
J'ai une collection qui s'affiche dans une liste déroulante multi choix et je souhaite que lorsque la personne choisit une ligne spécifique de la liste déroulante par exemple PPERSP qu'un checkbox avec son intitulé apparaisse dans le formulaire.

Alors voici un bout de mon jsp avec le javascript que j'essaie de faire fonctionner mais hélas, j'ai même pas l'impression que la checkbox "Vr à bloquer" se cache :s :

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
 
<script type="text/JavaScript" language="JavaScript">
/**
* fonction d'affichage de la zone "Vr à bloquer" en fonction de la sélection de la campagne "PPERSP" dans la liste déroulante Campagne
*/
function displayVrABLOQUER() {
        var selectObj = document.crediparForm.opFid;
        var size = selectObj.options.length;
    
        for (var i=0; i< size; i++) {
                if(selectObj.options[i].value=='PPERSP' && selectObj.options[i].selected) {
                        affiche = true;
                }
        }
    if (affiche==true) {
        vr.style.visibility = "visible";
    } else {
    vr.style.visibility = "hidden";
    }
}
</SCRIPT> 
 
<!-- Partie du formulaire à faire apparaitre si PPERSP de la liste campagne est sélectionné-->
<td class="textebold">VR à bloquer <html:checkbox property="codeVr" value="true" /></td>
 
<!--Liste déroulante de campagne-->
<td ROWSPAN="2"><html:select property="opFid" multiple="true" size="4" onchange="displayVrABLOQUER();">
<html:options collection="opsFid" labelProperty="libelle" property="code" />
			</html:select></td>

Si quelqu'un a une idée ça serait cool car moi et le javascript... je m'emmèle un peu...
Merci.

[OButterlin]

Je ferais ceci à ta place

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
 
...
<script type="text/JavaScript" language="JavaScript">
/**
* fonction d'affichage de la zone "Vr à bloquer" en fonction de la sélection de la campagne "PPERSP" dans la liste déroulante Campagne
*/
function displayVrABLOQUER() 
{
    if (document.crediparForm.opFid.value == "PPERSP") 
    {
        document.getElementById("zoneVR").style.visibility = "visible";
    }
    else
    {
        document.getElementById("zoneVR").style.visibility = "hidden";
    }
}
</script> 
 
<!-- Partie du formulaire à faire apparaitre si PPERSP de la liste campagne est sélectionné-->
<td class="textebold">
    <span id="zoneVr">
    VR à bloquer <html:checkbox property="codeVr" value="true" />
    </span>
</td>
 
<!--Liste déroulante de campagne-->
<td ROWSPAN="2">
    <html:select property="opFid" multiple="true" size="4" onchange="displayVrABLOQUER();">
        <html:options collection="opsFid" labelProperty="libelle" property="code" />
    </html:select>
</td>
...

A+

[littlebear]

Je ferais ceci à ta place

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
 
...
<script type="text/JavaScript" language="JavaScript">
/**
* fonction d'affichage de la zone "Vr à bloquer" en fonction de la sélection de la campagne "PPERSP" dans la liste déroulante Campagne
*/
function displayVrABLOQUER() 
{
    if (document.crediparForm.opFid.value == "PPERSP") 
    {
        document.getElementById("zoneVR").style.visibility = "visible";
    }
    else
    {
        document.getElementById("zoneVR").style.visibility = "hidden";
    }
}
</script> 
 
<!-- Partie du formulaire à faire apparaitre si PPERSP de la liste campagne est sélectionné-->
<td class="textebold">
    <span id="zoneVr">
    VR à bloquer <html:checkbox property="codeVr" value="true" />
    </span>
</td>
 
<!--Liste déroulante de campagne-->
<td ROWSPAN="2">
    <html:select property="opFid" multiple="true" size="4" onchange="displayVrABLOQUER();">
        <html:options collection="opsFid" labelProperty="libelle" property="code" />
    </html:select>
</td>
...

A+

Merci pour ton aide. Oui c'était pas si compliqué que ça enfin de compte mais le soucis car un souci parfois peut en cacher un autre est que le code de la jsp que j'avais posté est malheureusement déjà dans un autre span avec un id permettant de mettre à jour ce span qui regroupe celui du Vr.
Je sais pas si j'ai été assez clair du coup bah ça merdouille. Il doit mal réagir le fait de voir deux Ids dans deux spans. Il me fait des bugs d'affichage.

<span Id=1>
<span Id=2>
Checkbox Vr blablabla
</span>
</span>

[OButterlin]

Ça ne pose pas de problème en soit d'avoir 2 <SPAN> imbriqués, le problème est plus sûrement lié au fait que tu as un tableau, du moins avec Firefox.
Si par exemple on a

Code :

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

1
2
3
4
5
 
<tr id="t1">
   <td>un texte</td>
   <td><input type="checkbox" name="n1"/></td>
</tr>

et qu'on "s'amuse" à cacher/afficher la ligne avec "display=(none|block)", le résultat sera correcte sur IE (et oui, ça arrive qu'il réagisse mieux !) et naze sur Firefox.

Pour t'aider, il faudrait poster la page

A+

[littlebear]

Alors voici les éléments importants de ma page jsp:

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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
 
<html:html>
<head>
<link rel="stylesheet" href="<%=request.getContextPath()%>/site/themes/style.css" type="text/css">
<script type="text/JavaScript" src="<%=request.getContextPath()%>/site/script/testform.js"></script>
<script type="text/JavaScript" language="JavaScript">
function reloadList() {
        updatePage("updateTest.do", "testForm");
}
 
/**
* fonction d'affichage de la zone "Vr à bloquer", si PPERSP de la liste déroulante TestC est sélectionnée alors la checbox VR apparait
*/
function displayVrABLOQUER() 
{
    if (document.testForm.opFid.value == "PPERSP") 
    {
        document.getElementById("zoneVR").style.visibility = "visible";
    }
    else
    {
        document.getElementById("zoneVR").style.visibility = "hidden";
    }
}
 
</SCRIPT> 
 
</head>
 
<body>
<span id="credipar">
	<html:form action="toto.do" method="post">
	<FIELDSET>
	<LEGEND align=top>Critères de recherche </LEGEND>
	<div align="left">
	<table>
		<tr>
			<td class="textebold">TestA</td>
			<td class="textebold">TestB</td>
		</tr>
		<tr>
<td><html:select property="dtestA" size="1" onchange="reloadList();">
<html:option value=""> --- Choississez un TestA --- </html:option>
<html:options collection="testsA" labelProperty="nom" property="id" />
</html:select></td>
<td><html:select property="testsB" size="1" onchange="reloadList();">
<html:option value=""> --- Choississez un TestB--- </html:option>
<html:options collection="testsB" labelProperty="libTestB" property="id" />
</html:select></td>
		</tr>
	</table>
	<table>
		<tr>
			<td class="textebold">TestC</td>
			<td></td>
		</tr>
		<tr>
<td><html:select property="testC" size="1">
<html:option value=""> --- Choississez un TestC--- </html:option>
<html:options collection="testC" labelProperty="nomprenom" property="id" />
</html:select></td>
<td class="textebold">
<div id="zoneVr">
VR <html:checkbox property="codeVr" value="true"/>
</div>
			</td>
		</tr>
	</table>
	<table>
		<tr>
			<td class="TestD</td>
			<td></td>
		</tr>
		<tr>
			<td ROWSPAN="2"><html:select property="testD multiple="true" size="4" onchange="displayVrABLOQUER();">
				<html:options collection="testsD" labelProperty="libelle" property="code" />
			</html:select></td>
 
			<td></td>
 
			<td align="right"><html:submit style="width:125px" value="Afficher" /></td>
		</tr>
		<tr>
			<td></td>
		</tr>
	</table>
	</div>
	</FIELDSET>
	<br>
</html:form> 
</span>
 
<script>displayVrABLOQUER()</script>
</body>
</html:html>

Voilà le code. En faite j'ai remplacé le span par un div car avec le span, lorsque je sélectionnais dans la liste déroulante TestA, tout ce qui se trouve en dessou du checkbox Vr disparaissait. Avec le div ça passe mieux mais le souci est lorsque je sélectionne dans la liste déroulante TestA, il me fait apparaitre le checkbox Vr alors que l'élement de la liste TestC n'est pas sélectionné. Car la checkbox Vr ne doit apparaitre que si PPERSP de la liste déroulante TestC est sélectionné.
Si vous voyez comment je pourrais m'en sortir de ça, ça m'aiderait beaucoup.
Merci.

[OButterlin]

Que fait au juste ta méthode updatePage(...) ?
- une soumission du formulaire
- ajax

[littlebear]

Bonjour,

Et bien ma méthode updatePage permet de mettre à jour le contenu du premier span qui en faite regroupe plusieurs listes déroulantes dépendantes les unes de autres. C'est à dire que lorsque l'on ne choisit pas un élément dans la première liste alors les autres sont vides. C'est que lorsque l'on choisit la première qu'il y a le javascript qui lance une classe pour effectuer la mise à jour de la liste en fonction de ce que l'on a choisir dans la liste précédente et ainsi de suite. La checkbox Vr vient juste après tout en restant dans le même span qui est mise à jour.
Juste après la checkbox de la Vr, j'ai d'autres listes déroulantes que j'ai besoin pour les critères de recherche et ce n'est bien sûr qu'après ces diverses listes déroulantes, voir le Vr qui s'affiche que si l'élément PPERSP d'une des listes déroulantes est sélectionnées puis il y a le bouton "Afficher" et "Annuler" Qui une fois les critères sélectionnés et le bouton validé qu'un tableau en bas de page s'affiche.

[littlebear]

Que fait au juste ta méthode updatePage(...) ?
- une soumission du formulaire
- ajax

Toujours aucune idée comment je pourrais mettre un div id="..." dans un span id="..."?
++

[OButterlin]

Excuse... j'ai zappé ton problème

D'après ce que j'ai cru comprendre, tu choisis une valeur dans la première combo et tu charges les valeurs de la deuxième.
Lorsque tu as choisi une valeur dans la deuxième, tu charges la troisième etc...
C'est bien ça ?

Comment charges-tu les combos ?

Peux-tu mettre tout le code de la page ?

A+

[OButterlin]

Au vu des pages que tu m'as fourni on peut dire 2 choses :

1) tu bosses pour PSA (framework Lego) si je ne m'abuse
2) il faudrait appeler la fonction displayVrABLOQUER() dans <body onload="displayVrABLOQUER() ">

A+

[littlebear]

Au vu des pages que tu m'as fourni on peut dire 2 choses :

1) tu bosses pour PSA (framework Lego) si je ne m'abuse
2) il faudrait appeler la fonction displayVrABLOQUER() dans <body onload="displayVrABLOQUER() ">

A+

On ne peut rien te cacher grrrrr !! mdrr
C'est pour cela que j'ai voulu cacher le code qui pourrait me démasquer :-p
Ok je testerais ça demain car j'ai pas internet au boulot :s c'est balot.
Je te dirais ça demain soir si c'est ok ^^ Merci !

[littlebear]

Au vu des pages que tu m'as fourni on peut dire 2 choses :

1) tu bosses pour PSA (framework Lego) si je ne m'abuse
2) il faudrait appeler la fonction displayVrABLOQUER() dans <body onload="displayVrABLOQUER() ">

A+

Troooop coool ... huhuh !! ça ne marche toujours pas !!
Vas falloir que je fasse ça autrement. à moins d'une autre suggestion.

[OButterlin]

Le problème vient de la méthode displayVrABLOQUER().
Comme tu l'as déclarée "multiple", tu ne peux plus utiliser l'attribut "value" seul.
Tu pourrais faire un truc dans le genre

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
34
35
36
37
38
39
40
41
 
<html>
<head>
<script>
function selectionne()
{
    var hideElem = false;
    var x = document.forms[0].slt1;
    for ( var i = 0; i < x.options.length; i++ )
    {
        if ( x.options[i].selected && x.options[i].value == "2" )
        {
            hideElem = true;
            break;
        }
    }
    
    if (hideElem) document.getElementById("cacher").style.display = "none";
    else document.getElementById("cacher").style.display = "block";
}
</script>
</head>
 
<body>
 
    <div id="cacher">
    <hr>
    Cette ligne peut se cacher !
    <hr>
    </div>
 
    <form>
        <select name="slt1" multiple size="4" onchange="selectionne()">
            <option value="1">Afficher</option>
            <option value="2">Cacher</option>
            <option value="3">Supprimer</option>
            <option value="4">Modifier</option>
        </select>
    </form> 
</body>
</html>

Par contre, dans les fichiers que tu m'as fournis, je n'ai pas la définition du champ opFid, je ne sais pas si effectivement tu as une sélection multiple, à toi de voir...

[littlebear]

Le problème vient de la méthode displayVrABLOQUER().
Comme tu l'as déclarée "multiple", tu ne peux plus utiliser l'attribut "value" seul.
Tu pourrais faire un truc dans le genre

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
34
35
36
37
38
39
40
41
 
<html>
<head>
<script>
function selectionne()
{
    var hideElem = false;
    var x = document.forms[0].slt1;
    for ( var i = 0; i < x.options.length; i++ )
    {
        if ( x.options[i].selected && x.options[i].value == "2" )
        {
            hideElem = true;
            break;
        }
    }
    
    if (hideElem) document.getElementById("cacher").style.display = "none";
    else document.getElementById("cacher").style.display = "block";
}
</script>
</head>
 
<body>
 
    <div id="cacher">
    <hr>
    Cette ligne peut se cacher !
    <hr>
    </div>
 
    <form>
        <select name="slt1" multiple size="4" onchange="selectionne()">
            <option value="1">Afficher</option>
            <option value="2">Cacher</option>
            <option value="3">Supprimer</option>
            <option value="4">Modifier</option>
        </select>
    </form> 
</body>
</html>

Par contre, dans les fichiers que tu m'as fournis, je n'ai pas la définition du champ opFid, je ne sais pas si effectivement tu as une sélection multiple, à toi de voir...

Salut,

Le problème vient bien de la fonction displayVrABLOQUER().
Ce n'est pas un souci de multiple ou de value car il affiche bien la checkbox Vr.
Le souci vient du span car il contient le div "zoneVr", ce qui fait que le div ne joue pas son rôle correctement car le span force la mise à jour de son contenu donc également du div :<span id="...."> .. <div id="zoneVr">....</div>.</span>
Ce qui fait que lorsque que les listes se mettent à jour, la zoneVr s'affiche sans même avoir besoin de cliquer sur la liste déroulante appropriée.
Faut que je vois au niveau du script si je peux séparer les parties :s de manière à pouvoir faire sortir la zoneVr du span.

Merci à toi de t'être penché sur mon problème. On a résolu le problème en déplaçant les scripts du VR et des dates dans la function qui effectue la mise à jour des listes. Puis également vidé le cache. Ce qui pourrait causé aussi un problème pour plus tard sur les postes utilisateurs lors d'évolution des fichiers .js.