Discussion :

[SI_BDD]

Bonjour ,

Je suis sur un nouveau projet web en JSP, HTML et JS,..
Sur une des pages jsp, je souhaite exécuter une action sur un champs de type FILE qui me permettra de récupérer la valeur du champs en faisant comme suit :

Code :

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

1
2
 
<input type="file" id="id" name="name" size="50" onchange="monAction();">

monAction() est une action java script, qui me permet de tester la valeur du champs dont l'id est "id".

Le souci, l'action du "onchange" ne s’exécute jamais.

Avez vous une suggestion ?

Merci par avance

[Nico02]

Salut,

Je ne vois rien de particulier au premier abort, tu peux nous montrer ton code JS ?

[plawyx]

Code :

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

1
2
 
<input type="file" id="id" name="name" size="50" onchange="monAction();">

monAction() est une action javascript, qui me permet de tester la valeur du champs dont l'id est "id".

Le souci, l'action du "onchange" ne s’exécute jamais.

ne s'exécute jamais ou ne fais pas ce que tu souhaites ?

essaye:

Code :

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

onchange="alert('Coucou');

Si la fenêtre apparaît, cela vient sûrement du code de "monAction()".

Peut-on le voir ?

[SI_BDD]

Bonjour,

Merci pour les réponses.
Effectivement le

Code :

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

onchange="alert('Coucou');

fonctionne.

Mon code de l'action est :

Code :

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

1
2
3
4
5
6
7
function monAction()
	    {
		 	if(document.getElementById("id")!=null) {
			 	var val= document.getElementById("id");
		         bool= val!=null && val!= '' ? true : false ;
		 	}
	    }

En sachant que bool est une variable de type boolean que j'ai initialisé au debut de la JSP.

Mon action est incorrecte ?

Cordialement

ne s'exécute jamais ou ne fais pas ce que tu souhaites ?

essaye:

Code :

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

onchange="alert('Coucou');

Si la fenêtre apparaît, cela vient sûrement du code de "monAction()".

Peut-on le voir ?

[oliv37]

Je te conseille d'installer le module complémentaire firebug pour ton navigateur firefox. Cela va te permettre de détecter les erreurs javascript.

[SI_BDD]

Merci oliv37. Avec la version de firefox de l'entreprise, il ny'a pas de version de firebug dispo ( 17.0.6 )

Cordialement

Je te conseille d'installer le module complémentaire firebug pour ton navigateur firefox. Cela va te permettre de détecter les erreurs javascript.

[Nico02]

Si tu veux récupérer la valeur associée à un élément tu dois le préciser

Code :

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

var val= document.getElementById("id").value;

Sinon cela fait référence à l’élément entier de l'arbre DOM

Ensuite pour tester l'existence d'un objet en javascript tu peux simplement écrire

Code :

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

if( document.getElementById( "id" ) )

ou alors

Code :

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

if( typeof(document.getElementById("id") ) != 'undefined' )

mais il n'est pas nécessaire de tester son existence étant donnée que tu l'écris en dur dans ton code, donc cet élément sera toujours présent.

Pour finir il me semble (mais là je n'en suis pas sur) que les valeurs des éléments ne sont jamais null, mais simplement vide.

Ducoup tu dois pouvoir écrire ton code comme ça

Code :

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

1
2
3
4
5
 
function monAction() {
  bool = document.getElementById("id").value != '';
  alert ( 'Mon champ est-il rempli ? ' + bool );
}

[oliv37]

As-tu essayé de mettre un alert('ok') dans ta fonction monAction pour bien vérifier qu'elle n'est pas exécutée ?

[SI_BDD]

merci pr les réponses, en faisant ainsi :

Code :

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

1
2
3
4
5
function monAction(){
		alert('ok');
		bool= document.getElementById("id").value != '';
		alert ( 'Mon champ est-il rempli ? ' + bool);
	}

Résulat :
J'ai droit juste à un "ok".

Donc pour moi

Code :

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

document.getElementById("id").value != ''

ne me renvoie rien. c'est très étonnant

Par contre, je viens de faire un autre test comme suit :

Code :

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

alert ( 'Mon champ est-il rempli ? ' + document.getElementById("id").value != '' );

l'alerte m'affiche un "true" quand je saisi quelque chose dans mon champs. Ceci dit, je pense que c'est lors de l'utilisation de ma variable booléenne que ça ne marche pas super bien.

je vais continuer les investigations.

As-tu essayé de mettre un alert('ok') dans ta fonction monAction pour bien vérifier qu'elle n'est pas exécutée ?

[SI_BDD]

Pour vérifier la valeur de la variable "bool" avant et après l’exécution de l'action, je remarque que la valeur reste toujours à "false".
Peut être il faudrait rafraichir la page ? des idées pour cela ?

Merci.

Cordialement

merci pr les réponses, en faisant ainsi :

Code :

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

1
2
3
4
5
function monAction(){
		alert('ok');
		bool= document.getElementById("id").value != '';
		alert ( 'Mon champ est-il rempli ? ' + bool);
	}

Résulat :
J'ai droit juste à un "ok".

Donc pour moi

Code :

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

document.getElementById("id").value != ''

ne me renvoie rien. c'est très étonnant

Par contre, je viens de faire un autre test comme suit :

Code :

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

alert ( 'Mon champ est-il rempli ? ' + document.getElementById("id").value != '' );

l'alerte m'affiche un "true" quand je saisi quelque chose dans mon champs. Ceci dit, je pense que c'est lors de l'utilisation de ma variable booléenne que ça ne marche pas super bien.

je vais continuer les investigations.

[Nico02]

Mais elle est initialisé ou cette variable bool au fait ?

[oliv37]

C'est du javascript donc pas besoin de rafraîchir la page.
Effectivement il faudrait nous montrer le code complet.
Etant donné que c'est une variable globale, peut-être que tu la modifies également dans une autre partie du code...

[SI_BDD]

Tout au début de la jsp entre

Code :

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

1
2
3
<% 
boolean bool = false;
%>

et la fonction entre

Code :

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

1
2
<script 
</script>

Est ce que cela pose problème ? je n'ai pas vraiment l'habitude d'utiliser trop de javascript

merci

Mais elle est initialisé ou cette variable bool au fait ?

[oliv37]

pour déclarer une variable en javascript il me semble qu'il faut utiliser le mot-clé var.

Code :

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

1
2
 
var bool = false;

[Nico02]

pour déclarer une variable en javascript il me semble qu'il faut utiliser le mot-clé var.

Code :

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

1
2
 
var bool = false;

Tu peux très bien te passer du mot clé var il n'y a pas de soucis de se coté là.

Par contre @SI_BDD je pense que tu fais une grosse confusion dans ce que fais JSP.

Le code JSP d'une page s’exécute coté serveur et est donc exécute avant le code JavaScript qui lui est exécuté sur le poste client. Tu ne peux donc pas mêler tes variables comme tu le fais (en tout cas pas comme ça).

Comme je ne sais pas vraiment se que tu veux faire avec se code je ne peux t'aider plus que ça, mais je t'invite en tout cas à lire de la documentation sur JSP et l'interaction avec du javascript

Cdt.

[SI_BDD]

En regardant de plus prés ma jsp, je me rend compte que ma variable bool est initialisée dans une scriptlet ( java), donc c'est côté serveur si j'ai bien compris.

c'est à cause de ça que la variable ne prend jamais la nouvelle valeur car le code java n'est exécuté que au chargement de la jsp ?


Comment faire pour remédier à cela ?

Merci

pour déclarer une variable en javascript il me semble qu'il faut utiliser le mot-clé var.

Code :

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

1
2
 
var bool = false;

[Nico02]

Exactement,

Lorsque que tu écris une page JSP, elle est d'abord interprétée coté serveur. Tous les appels à tes beans et au code java en général est fait coté serveur.

Les tags JSP correspondent à des "marqueurs" qui sont remplacé par les valeurs de ton code Java. Une fois cette phase effectuée, la page ainsi générée est envoyé au client pour être interprété par le navigateur qui va afficher le contenu.

Il est donc ici logique que tu ne puisses plus accéder à tes variables serveur coté client.

Les solutions qui te reste sont, soit de valider ta page (submit de ton formulaire par exemple) et d'effectuer ton traitement à se moment là (puisque la page est renvoyé au serveur avec tes nouvelles valeurs).
Soit d'utiliser AJAX pour faire un appel serveur.

Mais comme je ne sais toujours pas quel est le but de tout ça, je n'en dirai pas plus

Cdt.

[OButterlin]

Code :

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

1
2
3
4
5
6
7
8
 
<script>
<%
boolean bool = false;
...
out.print("var bool = " + bool);
%>
</script>

mais si c'est comme tu l'as montré, ceci suffit

Code :

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

1
2
3
4
 
<script>
var bool = false;
</script>

[SI_BDD]

Merci pour l'explication.
En fait le but de ce que je suis entrain de faire est de voir si un champs est rempli, pour afficher/ou pas un autre champs.
Ce que je viens de faire et qui fonctionne sans utiliser une variable côté serveur est de changer ma fonction javaScript pour rendre visible ou pas mon deuxième champs comme suit :

Code :

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

1
2
3
4
5
6
7
function monAction(){
		document.getElementById("id").style.visibility="hidden";
		bool= document.getElementById("id").value != '';
		 if (bool== true){
	         document.getElementById("champs2").style.visibility="visible";
		}else { document.getElementById("champs2").style.visibility="hidden";
 }

je suis entrain de tester pour voir ce que ça donne, vu ce que je vois ca fonctionne seulement si mon champs est de type text ( pas pour file par exemple )

Code :

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

1
2
 
<input type="file" id="id" name="idName" size="65" onchange="monAction();">

cdt

Exactement,

Lorsque que tu écris une page JSP, elle est d'abord interprétée coté serveur. Tous les appels à tes beans et au code java en général est fait coté serveur.

Les tags JSP correspondent à des "marqueurs" qui sont remplacé par les valeurs de ton code Java. Une fois cette phase effectuée, la page ainsi générée est envoyé au client pour être interprété par le navigateur qui va afficher le contenu.

Il est donc ici logique que tu ne puisses plus accéder à tes variables serveur coté client.

Les solutions qui te reste sont, soit de valider ta page (submit de ton formulaire par exemple) et d'effectuer ton traitement à se moment là (puisque la page est renvoyé au serveur avec tes nouvelles valeurs).
Soit d'utiliser AJAX pour faire un appel serveur.

Mais comme je ne sais toujours pas quel est le but de tout ça, je n'en dirai pas plus

Cdt.

[Nico02]

Dans se cas tu ne dois pas utiliser de variables serveur ça n'a aucun intérêt, continue sur du JS pur.

Par contre je peux t'assurer que ça marche aussi pour les <input type="file">

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
 
 
<html>
<head>
<script>
 
function checkField()
{
 
if( document.getElementById('t1').value != '' )
{
 document.getElementById('id2').style.visibility="visible";
}
else
 document.getElementById('id2').style.visibility="hidden";
}
 
 
function checkFile()
{
 
if( document.getElementById('f1').value != '' )
{
 document.getElementById('id1').style.visibility="visible";
}
else
 document.getElementById('id1').style.visibility="hidden";
}
</script>
</head>
<body>
 
<input type="file" id="f1" name="file" onchange="checkFile();">
<input type="text" id="id1" name="txt2" value="Hello" style="visibility:hidden;">
</br>
</br>
 
<input type="text" id="t1" name="txt1" value="Hello 1" onchange="checkField();" >
 
<input type="text" id="id2" name="txt2" value="Hello 2" style="visibility:hidden;">
 
</body>
</html>