Envoi d'une fonction JS dans un page avec ajax et servlet

**Grichka29** · 16/05/2014, 10h31

Bonjour,

Je ne savais pas trop ou poster mon problème étant de donnée que je ne sais pas si cela vient de la servlet, du script JS ou autre.

Pour vous faire un résumé vite fait : je suis en stage. Mon sujet est le suivant, il y a une maquette de train avec des capteurs (gérer par raspberry pi) qui envoi des infos dans une bdd sur un server. Moi mon rôle est de récupérer ces infos et de mettre à jour dynamiquement un schéma en svg dans une page html.

J'ai donc une page jsp, contenant le code du schéma SVG ainsi qu'une fonction JS qui appelle toutes les X secondes une servlet allant consulter la bdd via une fonction SELECT. Puis, la servlet retourne une fonction JS à la pae, contenant l'info récupérée dans la bdd, qui arrive via l'Ajax dans une div. La fonction est censée mettre à jour le schéma, à savoir, modifier la propriété "fill" du cercle concerné.

Mon problème :

La fonction JS qui est renvoyée, est traitée avec l'Ajax dans une div <div id="essai"></div>. Au debug de firefox, je voix bien que la fonction arrive toutes les X secondes, mais aucun changement n'est apporté à la propriété "fill" du cercle. Il ne change pas de couleur.

J'ai essayé de remplacer la div "essai" qui reçoit la fonction par <script id="essai"></script>, cela marche une fois, mais au debug, je vois que la fonction n'arrive pas une seconde fois, elle n'est pas mise à jour toutes les X secondes, elle reste statique, pourtant je n'ai rien modifié d'autre, la servlet est toujours bien appelée (et fait son travail de lecture) toutes les X secondes.

Voyez-vous d’où vient le souci ?

Voici mes codes :

D'abord la JSP contenant le svg, JS appelant la servlet et l'Ajax :

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
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
 
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
 
<html>
<script>
var requete;
 
function interro()
{
 
 
	if (window.XMLHttpRequest) 
	{
		requete = new XMLHttpRequest();
	} 
	else if (window.ActiveXObject) 
	{
		requete = new ActiveXObject("Microsoft.XMLHTTP");
	}
	requete.onreadystatechange = majIHMtxt;
 
	requete.open('GET', 'servlet?ck=' + (new Date()).getTime(), true);
 
	requete.send(null);
 
}
 
function majIHMtxt() 
{
	if (requete.readyState == 4) 
	{
		if (requete.status == 200) 
		{
			incrustation = document.getElementById("essai");
			incrustation.innerHTML = requete.responseText;
		}
	}
}
</script>
 
<script>setInterval('interro()', 3000); </script>
 
		<head>
			<meta charset="utf-8" />
 
			<title>Test SVG JSP</title>
		</head>
 
		<body>
		<form method="post" action="Logoff">
 
              <div id="connexion">
 
				<% 
				String pseudo = (String) session.getAttribute("utilisateur");
				out.print ("<span id=\"bienv\">Connexion : " + pseudo + "  </span><input type=\"submit\" value=\"Déconnexion\" />");
				%>
 
              </div>
 
            </form>
 
 
 
 
 
			<svg width="600" height="300" xml:lang="fr"
			xmlns="http://www.w3.org/2000/svg"
			xmlns:xlink="http://www.w3.org/1999/xlink">
 
					<path d="m 400,100 -250,0 c -40,0 -80,40 -80,80 0,40 40,80 80,80 l 250,0 c 40,0 80,-40 80,-80 0,-40 -40,-80 -80,-80 m 0,160 50,0 c 40,0 80,-40 80,-80 0,-40 -40,-80 -80,-80 l -50,0" style="fill:none; stroke:black;" />
 
							<g>
									<path d="m 80,120 20,20 " style="fill:none; stroke:black;" />
									<path d="m 80,240 20,-20 " style="fill:none; stroke:black;" />
									<path d="m 200,110 0,-20 " style="fill:none; stroke:black;" />
									<path d="m 360,110 0,-20 " style="fill:none; stroke:black;" />
									<path d="m 470,115 10,-20 " style="fill:none; stroke:black;" />
									<path d="m 460,110 -20,20 " style="fill:none; stroke:black;" />
									<path d="m 460,250 -20,-20 " style="fill:none; stroke:black;" />
									<path d="m 470,245 10,20 " style="fill:none; stroke:black;" />
									<path d="m 520,180 20,0 " style="fill:none; stroke:black;" />
									<path d="m 360,250 0,20 " style="fill:none; stroke:black;" />
									<path d="m 200,270 0,-20 " style="fill:none; stroke:black;" />
							</g>
							<g>
									<circle id="A1" stroke="black" fill="white" r="17" cy="100" cx="280"/>
									<circle id="A2" stroke="black" fill="white" r="17" cy="100" cx="135"/>
									<circle id="A3" stroke="black" fill="white" r="17" cy="180" cx="72"/>
									<circle id="A4" stroke="black" fill="white" r="17" cy="260" cx="135"/>
									<circle id="A5" stroke="black" fill="white" r="17" cy="260" cx="280"/>
									<circle id="A6" stroke="black" fill="white" r="17" cy="260" cx="405"/>
									<circle id="A7" stroke="black" fill="white" r="17" cy="180" cx="477"/>
									<circle id="A8" stroke="black" fill="white" r="17" cy="100" cx="405"/>
									<circle id="B2" stroke="black" fill="white" r="17" cy="133" cx="512"/>
									<circle id="B1" stroke="black" fill="white" r="17" cy="226" cx="512"/>
							</g>
 
 
							<g>
									<text x="270" y="105" style="fill: #FFFFFF; stroke: #000000; font-family: Arial;">A1</text>
									<text x="125" y="105" style="fill: #FFFFFF; stroke: #000000; font-family: Arial;">A2</text>
									<text x="62" y="185" style="fill: #FFFFFF; stroke: #000000; font-family: Arial;">A3</text>
									<text x="125" y="265" style="fill: #FFFFFF; stroke: #000000; font-family: Arial;">A4</text>
									<text x="270" y="265" style="fill: #FFFFFF; stroke: #000000; font-family: Arial;">A5</text>
									<text x="395" y="265" style="fill: #FFFFFF; stroke: #000000; font-family: Arial;">A6</text>
									<text x="467" y="185" style="fill: #FFFFFF; stroke: #000000; font-family: Arial;">A7</text>
									<text x="395" y="105" style="fill: #FFFFFF; stroke: #000000; font-family: Arial;">A8</text>
									<text x="503" y="232" style="fill: #FFFFFF; stroke: #000000; font-family: Arial;">B1</text>
									<text x="503" y="139" style="fill: #FFFFFF; stroke: #000000; font-family: Arial;">B2</text>
							</g>
 
			</svg>
 
			<div id="essai"></div>
 
		</body>
</html>

Et celui de la servlet :

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
package servlets;
 
import java.io.IOException;
import java.sql.SQLException;
import java.util.Vector;
 
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
 
import model.Connect;
import model.Capteur;
import model.Select;
 
/**
 * Servlet implementation class servlet
 */
@WebServlet("/servlet")
public class servlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
 
    /**
     * @see HttpServlet#HttpServlet()
     */
    public servlet() {
        super();
        // TODO Auto-generated constructor stub
    }
 
	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
 
		doPost( request, response);
	}
 
	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
 
		try {
		StringBuffer resultat = new StringBuffer();	
		HttpSession session = request.getSession();
		Connect c = (Connect) session.getAttribute("connexion");
 
 
		Vector<Capteur> listeCapteur = Select.lireCapteur( c.getCon() );
 
 
		session.setAttribute("listeCapteur", listeCapteur);
 
 
		for (Capteur f : listeCapteur)
 
 
		resultat.append ("function test(){document.getElementById('"+ f.getCapt() +"').setAttribute(\"fill\", \"#FF6600\");}");
		resultat.append ("test();");
 
 
 
		response.getWriter().write(resultat.toString());
		} 
 
		catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
 
 
 
 
 
 
	}
 
}

Merci d'avance à ceux qui se pencheront sur mon problème.

Invité · 16/05/2014, 16h12

Plutôt que de renvoyer le code javascript, pourquoi ne pas écrire ce code, paramétré par le résultat de votre requête AJAX dans la JSP, puis demander son exécution à la réception du résultat de la requête AJAX ?

Code :

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

resultat.append (f.getCapt());

puis

Code :

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

1
2
3
4
if (requete.status == 200) 
		{
			test(requete.responseText);
		}

errata : il semble que vous envoyez plusieurs valeurs de f.getCapt(). Envoyez les sous forme d'une chaine de caractères avec un séparateur, si c'est possible, puis un split() avant l’exécution du test() pour chaque valeur obtenue après le split()

**Grichka29** · 16/05/2014, 18h55

Non non, je renvoie qu'une seule valeur à la fois, du moins pour le moment !

Ça marche nickel grâce à ta solution !
Merci beaucoup !!

Envoi d'une fonction JS dans un page avec ajax et servlet

JavaScript

Discussions similaires

Partager

Partager