JavaScript dans un fichier .jsp

Version imprimable

27/02/2013, 23h58
lisa_web

JavaScript dans un fichier .jsp

Bonjour,
je voudrais recuperer une variable var (String var=node.text) de mon lien et afficher sa valeur dans un div d'une autre page jsp
le lien est le suivant

Code:

<a class=treeview href='"+node.text+"' title=\"" + node.toolTip + "\">" + node.text+"</a>

Merci d'avance de votre aide
28/02/2013, 01h50
arnogues

Je vois pas ce que vient faire le JavaScript ici, personnellement tout ça devrait être fait coté serveur.
De plus ce node.text d’où vient-il ? D'une base de donnée ? Il vient peut-être d'un objet avec un id ?

Personnellement j'aurai fais :

Code:

<a class="treeview href="?nodeid=' + node.id + '"....></a>

Et dans l'autre page tu récupères ce paramètres "nodeid".
28/02/2013, 12h01
lisa_web

Bonjour arnogues, en fait node.text contient un nom de colonne de ma base de donnée. le lien est dans un boucle for qui affiche les noms de colonne sous forme de treeview.

Code:

<a class=treeview href='"+node.text+"' title=\"" + node.toolTip + "\">" + node.text+"</a>

Donc mon probleme c'est d'afficher au click sur un nom de colonne la valeur de node.text dans une partie de la page. le code que j'ai est long mais si vous voulez je peux le poster
28/02/2013, 15h12
n2engineer5

postes le code. j'ai relu plusieurs fois et je ne pige pas vraiment ce que tu veux.

Bonjour n2engineer5, je m'explique encore je veux recuperer la valeur de node.text (voir treeview.jsp en bas) quand je clik sur le lien et l'afficher dans une partie de ma page index.jsp (qui se charge de l'affichage) voici le code
une page treeview.jsp
une page index.jsp qui fait l'affichage

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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page import="java.util.List,java.util.ArrayList" %>
 
 
<%@include file="treeview.jsp" %>
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
 
 
 
<%
 
 
String folder = request.getParameter("f");      
if (folder==null){
        folder="images";
}
 
TreeView tv =new TreeView();
 
tv.target="content";
tv.setImagesUrl(folder);
 
//add treenode using the standard methods               
tv.add(tv.createNode("LESELEVES"));
 
List<String> list =
(ArrayList<String>)request.getAttribute("list");
for(int i = 0; i < list.size();i++){
//affichage des colonnes sous forme de treeview
        tv.nodes.item(0).add(tv.createNode(list.get(i),"toto",list.get(i)));
}
 
 
                out.print(tv.getTree());
        
%>
<h2>zone de recup</h2>
 
</body>
</html>

et une page treview.jsp

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
class TreeView{
	System.out.println("nombre de nodeList"+nodeList.length);
	for (int i=0;i<nodeList.length;i++){
		Node node = nodeList.item(i);	
		if(node.childNodes.length>0){
			System.out.println("nombre de childnode"+nodeList.length);
			hasChild=true;	
		}else{
			hasChild=false;
		}
		if(node.imageUrl==""){
			style="";
		}else{
			style="style='list-style-image: url("+ node.imageUrl +");'";
		}				
		if(hasChild){
			print("<li "+ style +" class=folder id='P" + parent + i + "'><a class=treeview href=\"javascript:toggle('N" + parent + "_" + i + "','P" + parent + i + "')\">" + node.text + "</a>");
		}else{
			if(node.target==""){
				node.target=target;
			}
		// c'est avec ce lien que je dois recuperer la valeur de node.text au click et l'afficher dans index.jsp
		//toto est l'url pattern declaré dans web.xml
			print("<li "+ style +" class=file><a class=treeview href='"+"toto' title=\"" + node.toolTip + "\">" + node.text+"</a>");
		}
		System.out.println("nom de la colonne"+node.text);
		if(hasChild){		
			loopThru(node.childNodes,parent + "_" + i);
		}	
		print("</li>");
	}
}

01/03/2013, 07h34
sekaijin

excuse mais édite ton message précédent
enlève l'espace entre [code et =jsp] pour que le forum afiche ton code correctement

indente ton code et mets nous uniquemet que la boucle où tu génére ton href qui te pose pb car là il y en a beaucoup trop c'est quasi illisible et on ne sais pas ce qu'on cherche.

Je t'ai fait une réponse et en relisant je me suis dit que je n'avais pas compris

Code:

<a class=treeview href=\"url/de/la/page/avec/un/div/qui/doit/recevoir/la/valeur.de?node.text="+node.text+"\" title=\"" + node.toolTip + "\">" + node.text+"</a>

ainsi la jsp "valeur.de" reçois dans sa queryString la variable node.text contenant du lien cliqué
A+JYT
01/03/2013, 11h05
lisa_web

Bonjour sekaijin, j'ai édité le code , en fait je pense que vous n'avez pas compris ma question et je me suis reexpliqué en haut
01/03/2013, 13h43
Invité

Bonjour,
Le problème est que tu n'obtiens rien avec ce fichier là ? ou en général tu ne parviens pas à faire passer de variable ?
01/03/2013, 18h39
sekaijin
je ne suis pas sur d'avoir compris
je pense que tu as un pb d'ordre d'exécution de test jsp

lorsque le client appelle ton url index.jsp
le code de celle-ci commence à s'exécuter puis vient l'instruction include treeview.jsp
là c'est le code de tree view qui est exécuté
cette jsp rand la main à index.jsp qui génère le HTML
celui-ci est lu par le client qui instancie le DOM et exécute le js

lorsque l'utilisateur clique sur le lien le code index.jsp à déjà été exécuté tu ne peux donc rien lui passer.

Je n'ai pas compris ce que tu veux faire
si c'est envoyer la variable à index.jsp et recharger cette page
je t'ai déjà donné la solution

Code:

<a class=treeview href=\"index.jsp?uneVariable="+node.text+"\" title=\"" + node.toolTip + "\">" + node.text+"</a>

il te reste juste dans index.jsp à récupérer la queryString (uneVariable) sera définie dedans et contiendra la valeur du lien cliqué.

si par contre tu ne veux pas ré exécuter la jsp index.jsp mais aller directement placer la valeur dans le DOM
(je n'ai pas compris où)
on n'a pas besoint du jsp mais du code HTML de ta page.

Code:

<a class=treeview href=\"#\" onclick="return nodeClick(this);>" + node.text+"</a>
Code:

1 2 3 4 5 6 function nodeClick(aHref) { var text = aHref.innerHtml; var p = document.createElement('P'); p.innerHtml = text; document.body.appendChild(p); }
Ainsi lorsque tu clique sur le lien la fonction nodeClick est appelée avec en paramètre le lien sur le quel tu as cliqué. la fonction récupère le texte du lien
crée un nouveau paragraphe
écrit le texte récupéré dans le paragraphe
et ajoute le paragraphe dans la page.
dans ce cas rien n'est envoyé au serveur aucun code jsp n'est réexécuté tout se passe en local sur le poste du client

A+JYT
03/03/2013, 16h59
lisa_web

Bonjour sekaijin, merci pour ton aide.
en fait c'est la deuxieme solution qui m'interesse. donc j'ai mi la fonction nodeClick dans la page treeview.jsp et j'ai appelé la fonction au click . Apres execution quand je clique sur le lien ca reste sur la meme page mais ca n'affiche toujours pas le lien sur la meme page.
03/03/2013, 17h15
lisa_web

En fait c'est le script qui n'est pas executé je crois parce j'ai essayé avec un simple fonction javascript qui affiche juste une boite de dialogue au clik, je precise que je suis une novice en javascript; donc peut etre que j'ai mal appelé la fonction.
03/03/2013, 18h36
sekaijin

poste la partie de code HTML (dans ton navigateur) du lien AHref avec la fonction

A+JYT

Bonjour sekaijin, comme expliqué en haut le lien se trouve dans une page jsp qui se charge d'afficher les resultats sous forme de treeview.

Code:

print("<li class=file><a class=treeview href=\"#\" onclick=\"return nodeClick(this);\">" + node.text+"</a>");

Cette page est appelé dans un autre fichier jsp , ce jsp contient le code HTML.
En fait je travail avec le MVC,
La page qui contient le code HTML est la suivante:

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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
 
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page import="java.util.List,java.util.ArrayList" %>
 
 
<%@include file="treeview.jsp" %>
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
 
<%
 
 
String folder = request.getParameter("f");      
if (folder==null){
        folder="images";
}
 
TreeView tv =new TreeView();
 
tv.target="content";
tv.setImagesUrl(folder);
 
                
tv.add(tv.createNode("LESELEVES"));
 
List<String> list =
(ArrayList<String>)request.getAttribute("list");
//recuperation des colonnes de ma table
for(int i = 0; i < list.size();i++){
        tv.nodes.item(0).add(tv.createNode(list.get(i),"toto",list.get(i)));
 
}
 
//affichage de la liste
                out.print(tv.getTree());
                
        
%>
<h2>zone de recuperation</h2>
 
 
</body>
</html>

bout de code de treeview.jsp qui contient la fonction nodeClick

Code:

1
2
3
4
5
6
7
8
public String getTree(){
		print("<script>function toggle(id,p){var myChild = document.getElementById(id);if(myChild.style.display!='block'){myChild.style.display='block';document.getElementById(p).className='folderOpen';}else{myChild.style.display='none';document.getElementById(p).className='folder';}}</script>");
		print("<style>ul.tree{display:none;margin-left:17px;}li.folder{list-style-image: url("+ folder +"/plus.gif);}li.folderOpen{list-style-image: url("+ folder +"/minus.gif);}li.file{list-style-image: url("+ folder +"/dot.gif);}a.treeview{color:"+ color +";font-family:verdana;font-size:8pt;}a.treeview:link {text-decoration:none;}a.treeview:visited{text-decoration:none;}a.treeview:hover {text-decoration:underline;}</style>");
		print("<script>function nodeClick (aHref){ var text=aHerf.innerHTML; var p=document.createElement('P'); p.innerHtml = text; document.body.appendChild (p);}s</script>");
 
		loopThru(nodes,"0");
		return buf.toString();
	}

04/03/2013, 20h13
sekaijin

Non se dont nous avons besoin c'est le code HTML DANS LE NAVIGATEUR

le code côté serveur ne sert à rien javascript s'exécute EXCLUSIVEMENT DANS LE NAVIGATEUR

A+JYT

Merci, sekaijin,
j'ai resolue le probleme et si ca peut aider un autre voici ce que j'ai fait

Code:

1
2
 
<script>function test (id){if(id) { image = id; } else { image ='erreur d'affichage'; } document.getElementById ('ecrit').innerHTML=image;}</script>

Code:

1
2
3
 
<a class=treeview href=\"#\" title=\"" + node.toolTip + "\"  onClick=\"javascript:test('"+node.text+  "')\">" + node.text+"</a><br>
<span  id='ecrit'></span>

Citation:
Envoyé par lisa_web
Merci, sekaijin,
j'ai resolue le probleme et si ca peut aider un autre voici ce que j'ai fait
Code:

1 2 <script>function test (id){if(id) { image = id; } else { image ='erreur d'affichage'; } document.getElementById ('ecrit').innerHTML=image;}</script>
cette fonction va te poser plusieurs problèmes
1) la syntaxe de l'affectation de l'erreur est incorrecte si tu passe dans le elle tu va avoir une exception
2) il faut retourner un booléen true ou false (dans ton cas false)
Code:

1 2 3 4 5 6 7 8 9 10 function test (id){ if(id) { image = id; } else { //image ='erreur d'affichage'; //ici tu ne peux pas avoir de ' dans une chaine délimité par des ' il faut utiliser des " image ="erreur d'affichage"; //ici pas de pb de string } document.getElementById ('ecrit').innerHTML=image; return false; //il faut retourner false l'explication dans la partie suivante }
Code:

1 2 3 <a class=treeview href="#" title="blabla" onclick="return test('node') ">node</a><br> <span id='ecrit'></span>
1) onclick s'écrit sans majuscule.
2) il ne faut pas mettre javascript: dans les methodes des événements.
3) il faut retourner false dans onclik. si tu ne le fait pas ton lien est activé. tu à mis # donc si ton lien est en bas de la page lorsqu'on clique on remonte tout en haut

A+JYT

07/03/2013, 13h59
lisa_web

Merci, sekaijin jai rectifié la fonction et l'appel