InnerHTML et rafraichissement

**manu80000** · 28/02/2008, 12h01

Bonjour, voila mon souics,

j'ai 4 listes liées, au début j'utilisé XMLHTTPRequest mais ca ne marche plus car celui ci ne me passe pas dans ma servlet donc j'ai trouvé une solution de remplacement qui est :

Code :

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

1
2
3
4
5
6
7
8
 
id = sel.options[sel.selectedIndex].value;
window.location.href = "PortefeuilleProjet?pAction=ExpBesoin&ssAction=ChargeListe&id=" + id + "&liste=" + liste;
 
<% if (request.getSession().getAttribute("select")!= null){%>
var aaa = "<%=request.getSession().getAttribute("select").toString()%>";
document.all("div_"+liste).innerHTML  = aaa;
<%}%>

le problème maintenant c'est qu'il me rafraichis toute ma page des que je clique sur une de mes listes donc je perd toutes mes données et les selections de mes listes.

si quelqu'un a une idée pour résoudre mon problème de listes liées.

Merci

**Duc Lebowski** · 28/02/2008, 12h06

Je pense que tu étais mieux parti avec le XMLHttpRequest.

Envoyé par manu80000

celui ci ne me passe pas dans ma servlet

T'as un bout de code ? normalement tu peux invoquer une servlet sans souci !

**manu80000** · 28/02/2008, 13h30

en fait ma servlet appel une classe qui me permet de chargé mes données d'une base de données et me renvoi une chaine qui possède la chaine HTML de mon select, le problème c'est qu'il ne me passe dans la la servlet. qd je fais un system.out.println("passe dans la servlet") ben ca va pas.

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
var xhr = false;
var xhr = new getXhr();
// On défini ce qu'on va faire quand on aura la réponse
xhr.onreadystatechange = function(){
// On ne fait quelque chose que si on a tout reçu et que le serveur est ok

if(xhr.readyState == 4 && xhr.status == 200){
leselect = xhr.responseText;
// On se sert de innerHTML pour rajouter les options a la liste
document.all["div_entAppart_EnseigneEB"].innerHTML = leselect;
}
}
// Ici on va voir comment faire du post

if (liste == "entAppart_EnseigneEB"){
var sel = document.getElementById("entAppart_ActiviteEB");}
else if (liste == "entAppart_ServiceEB"){
var sel = document.getElementById("entAppart_EnseigneEB");}
else if (liste=="entAppart_SousServiceEB"){
var sel = document.getElementById("entAppart_ServiceEB");}

id = sel.options[sel.selectedIndex].value;
xhr.open("GET", "PortefeuilleProjet?pAction=ExpBesoin&ssAction=ChargeListe&id=" + id + "&liste=" + liste,true);
xhr.send("null");

**manu80000** · 28/02/2008, 13h57

Bon je suis repartie sur l'ajax avec XMLHTTPRequest...

le problème c'est que xhr.responseText me renvoie toute ma page et pas seulement le contenu de mon select donc ca bloque...

**Duc Lebowski** · 28/02/2008, 14h02

Il faut que ta servlet redirige vers une jsp qui ne contient que le code HTML du div que tu souhaites rafraîchir...

**manu80000** · 28/02/2008, 14h14

je ne comprend pas ce que tu veux dire peux tu m'éclairer...
veux tu que je donne le code de ce que j'ai fait pour l'instant

non ca ne marche pas même en redirigeant vers une autre page il me renvoir toujours ma page d'accueil en entier...

**Duc Lebowski** · 28/02/2008, 14h36

Oui je veux bien voir le code !

J'ai déjà fait ça doit forcément marcher !

**manu80000** · 28/02/2008, 14h43

Alors ca c'est mon code javascript que j'ai dans 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
 
function getXhr(){
             var xhr = null; 
	if(window.XMLHttpRequest) // Firefox et autres
	   xhr = new XMLHttpRequest(); 
	else if(window.ActiveXObject){ // Internet Explorer 
	   try {
	     xhr = new ActiveXObject("Msxml2.XMLHTTP");
	   }
                catch (e) {
	       xhr = new ActiveXObject("Microsoft.XMLHTTP");
	   }
	}
	else { // XMLHttpRequest non supporté par le navigateur 
	   alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
	   xhr = false; 
	} 
             return xhr;
}
 
function ChargeListe(liste){
	document.getElementById("pAction").value="ExpBesoin";
	document.getElementById("ssAction").value="ChargeListe";
	var xhr = false;
             var xhr = new getXhr();
	xhr.onreadystatechange = function(){
	    if(xhr.readyState == 4 && xhr.status == 200){
	        leselect = xhr.responseText;
	        // On se sert de innerHTML pour rajouter les options a la liste
	        document.getElementById("div_" + liste).innerHTML = leselect;
	    }
             }
	if (liste == "entAppart_EnseigneEB"){
	       var sel = document.getElementById("entAppart_ActiviteEB");}
	else if  (liste == "entAppart_ServiceEB"){
	       var sel = document.getElementById("entAppart_EnseigneEB");}
             else if (liste=="entAppart_SousServiceEB"){
                    var sel = document.getElementById("entAppart_ServiceEB");}
	id = sel.options[sel.selectedIndex].value;
	xhr.open("GET", "PortefeuilleProjet?pAction=ExpBesoin&ssAction=ChargeListe&id=" + id + "&liste=" + liste,true);
	xhr.send("null");
 
}

ca c'est ma partie HTML 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
<body>
<fieldset><legend>Entit&eacute; appartenance</legend>
<table width=80%>
	<tr><td colspan = 5>Activite : </td>
	<td colspan = 5>Enseigne : </td>
	<td colspan = 5>Service : </td>
	<td colspan = 5>Sous Service : </td></tr>
	<tr><td colspan = 5>
									<select name= "entAppart_ActiviteEB" STYLE="width:200" onchange="ChargeListe('entAppart_EnseigneEB')">
									<%      Vector<ElementListe> listeActivite = (Vector) request.getSession().getAttribute("listeActivite");
                                                                        if (listeActivite != null){
            for (Integer i = 0; i < listeActivite.size(); i++) {
                ElementListe e = (ElementListe)listeActivite.elementAt(i);%>
	        <option value = "<%=e.getId()%>"><%=e.getLibelle()%></option>
	   <%}%>
								<%}%>
									</select>
								</td><td colspan = 5>
									<div id = "div_entAppart_EnseigneEB">
	<select name= "entAppart_EnseigneEB" STYLE="width:200" onchange = "ChargeListe('entAppart_ServiceEB')">
									         <option value = "-1">Enseigne</option>
								</select>
									</div>
								</td>

ensuite ma servlet c'est ca

Code :

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

1
2
3
4
5
6
 
else if (ssAction.equals("ChargeListe")){
								ChargeListe cl = new ChargeListe();
	String rep = cl.ChargeListeDeroulante(request.getParameter("liste"), Integer.parseInt(request.getParameter("id")));
	response.getWriter().write(rep);
	pageRetour = "/EB_Ajouter.jsp";

et mon code de ma classe charge liste c'est ca :

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
 
 
public String ChargeListeDeroulante(String liste, Integer id) {
			String reponse= "";
			String query = "";
			String function = "";
	    if (liste.compareToIgnoreCase("entAppart_EnseigneEB") == 0) {
	    	query += "SELECT R_ENSEIGNE.CODENS, LIBENS";
	    	query += " FROM R_ENSEIGNE, AFFECT_PAYS_ENSE";
	    	query += " WHERE R_ENSEIGNE.CODENS = AFFECT_PAYS_ENSE.CODENS";
	    	query += " AND AFFECT_PAYS_ENSE.CODPAY = " + id;
	    	query += " ORDER by LIBENS";
	    	function = "ChargeListe('entAppart_ServiceEB')"; 	    	
	    	}
	    else{
	    	if (liste.compareToIgnoreCase("entAppart_ServiceEB") == 0){
	     	 query += "SELECT DISTINCT R_SERVICE.CODSER, LIBSER";
		 query += " FROM R_SERVICE, AFFECT_ENSE_SERV";
		 query += " WHERE R_SERVICE.CODSER = AFFECT_ENSE_SERV.CODSER";		    	
		 query += " AND AFFECT_ENSE_SERV.CODENS = " + id;
		 query += " ORDER by LIBSER";
		 function = "ChargeListe('entAppart_SousServiceEB')";
	    	}
	    	else{	
	    	     if (liste.compareToIgnoreCase("entAppart_SousServiceEB") == 0){
	    	         query += "SELECT DISTINCT R_SOUS_SERVICE.CODSOUSER, LIBSOUSER";
	    	         query += " FROM R_SOUS_SERVICE, AFFECT_SERV_SSER";
	    	         query += " WHERE R_SOUS_SERVICE.CODSOUSER = AFFECT_SERV_SSER.CODSOUSER";		    	
	    	         query += " AND AFFECT_SERV_SSER.CODSER = " + id;
	    	         query += " ORDER by LIBSOUSER";
	    	         function = ""; // il l'y a plus de liste Ã* charger donc function = ""
	    		}
	    	}
	    }
	    try {
	    	ConnectionBdd connection = new ConnectionBdd();
	    	Statement statement = connection.connect();
	    	ResultSet resultSet = null;
 
	    	if (statement!= null){
	    		resultSet = statement.executeQuery(query);
				reponse = "<select name= '" + liste + "' id= '" + liste + "' STYLE='width:200' onchange=" + function + ">";
 
				while(resultSet.next()) {
					reponse += "<option value = '" + resultSet.getInt(1) + "'>" + resultSet.getString(2) + "</option>";
				}
				reponse += "</select>";
 
	    	}
	    	resultSet.close();
			statement.close();
			connection.deconnect();
 
		} catch (SQLException e) {
			e.getMessage()); 
		}
 
 
		return reponse;
 
	}

**Duc Lebowski** · 28/02/2008, 15h03

Oula...

Bon alors il y'a plusieurs choses qui ne vont pas le faire, alors si tu le veux bien on va le faire en plusieurs étapes.

Par exemple tu cherches : document.getElementById("entAppart_ActiviteEB").

Hors tu n'as pas donné d'id à ton select donc il va pas le trouver...

1) Pour commencer, peux-tu écrire le javascript suivant dans un fichier à part (scripts.js) :

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
// récupération de XMLHttpRequest selon le navigateur
function getXhr()
{
    var xhr = null; 
    if(window.XMLHttpRequest) // Firefox et autres
        xhr = new XMLHttpRequest(); 
    else if(window.ActiveXObject) { // Internet Explorer 
       try {
           xhr = new ActiveXObject("Msxml2.XMLHTTP");
       }
       catch (e) {
           xhr = new ActiveXObject("Microsoft.XMLHTTP");
       }
    }
    else { // XMLHttpRequest non supporté par le navigateur 
        alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
        xhr = false; 
    } 
    return xhr;
}
 
// rafraîchissement d'une zone
function chargeZone(url, htmlObjId)
{
   var divid = document.getElementById(htmlObjId);
   if (dibid == undefined) {
       alert("l'élément "+htmlObjId+" n'est pas reconnu");
       return;
    }
    var xhr = new getXhr();
    xhr.onreadystatechange = function(){
        if(xhr.readyState == 4 && xhr.status == 200){
            divid.innerHTML = xhr.responseText;
        }
    }
    xhr.open("GET", url, true);
    xhr.send("null");			
}

**manu80000** · 28/02/2008, 15h07

c'est bon c'est fait

le id est rempli dans le chargeliste la classe qui est appelé dans ma servlet et qui complete mon innerhtml

**Duc Lebowski** · 28/02/2008, 15h20

En fait je fais le test en même temps chez moi :

2) Voici ma page principale HTML qui ressemble à ce que tu veux faire (sauf j'ai mis en dur les valeurs pour la première liste vu que je v pas m'embêter à créer un contexte 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
<html>
<head>
<!-- scripts -->
<script type="text/javascript" src="scripts.js"></script>
<script type="text/javascript">
function chargeListe(selectObj, nextListId)
{
   url  = "PortefeuilleProjet?pAction=ExpBesoin&ssAction=ChargeListe&id=";
   url += selectObj.options[selectObj.selectedIndex].value;
   url += "&liste=" + selectObj.name;
   // --- DEBUG
   alert(url);
   // ---------
   chargeZone(url, nextListId); 
}
</script>
</head>
<body>
<table width="80%">
<tr>
    <th colspan="5">Activite : </th>
    <th colspan="5">Enseigne : </th>
</tr>
<tr>
    <td colspan="5">
        <div id="entAppart_ActiviteEBId">
        <select name="entAppart_ActiviteEB" style="width:200" 
               onchange="chargeListe(this, 'entAppart_EnseigneEBId')">
            <option value="A">A</option>
            <option value="B">B</option>
        </select>
        </div>
    </td>
    <td colspan="5">
        <div id="entAppart_EnseigneEBId">
        </div>
    </td>
</tr>
</table>
</body>
</html>

**manu80000** · 28/02/2008, 15h26

j'ai essayé ton code il me dis qu'il passe dans ma servlet je vais remplacer les a et b avec mes trucs a moi et je te dis quoi en tout cas merci beaucoup

**Duc Lebowski** · 28/02/2008, 15h36

Après, pour faire propre il ne faut pas que tu écrives le code html du select à l'intérieur de la servlet.

Comme pour la première liste, construit plutôt un vecteur que tu mets dans le request.

3) La page EB_Ajouter.jsp :

Code :

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

1
2
3
4
5
6
7
8
9
<select name= "entAppart_EnseigneEB" style="width:200">
<%
Vector<ElementListe> listeEnseigne = (Vector) request.getSession().getAttribute("listeEnseigne");
if (listeEnseigne != null){
    for (ElementEnseigne e : listeEnseigne) {%>
        <option value = "<%=e.getId()%>"><%=e.getLibelle()%></option>
     <%}%>
<%}%>
</select>

Envoyé par manu80000

en tout cas merci beaucoup

Je suis de bonne humeur aujourd'hui

Et puis ça m'occupe un peu

**manu80000** · 28/02/2008, 15h44

j'ai fini de tester ca marche comme il faut cependant qd j'appel ma servelt il faut que ma page de retour contienne uniquement le code HTML de la liste que je veuille afficher c'est ca?
parce qu'il fuadra que je crée je sais pas trop combien de page pour avoir mes listes qu'il me faut quand il faiut...

**Duc Lebowski** · 28/02/2008, 15h55

C'est exactement ça !

Bah ouais ça fait créer plein de pages, c'est un peu le hic !

Enfin il faut bien définir des règles koi, genre :

- index.jsp (page complète)
- section1.jsp (page complète)
- section1_activites.jsp (zone ajax de section1.jsp)
- section1_enseignes.jsp (zone ajax de section1.jsp)
...

**manu80000** · 28/02/2008, 16h19

bon ca marche ya juste pour ma deuxième liste qui me dis que mon select est null donc j'vais rechercher et ca devrait marché merci beaucoup...

InnerHTML et rafraichissement

Servlets/JSP Java

Discussions similaires

Partager

Partager