InnerHTML et rafraichissement

Version imprimable

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:

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

28/02/2008, 12h06
Duc Lebowski

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

Citation:

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 !

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:

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");

28/02/2008, 13h57
manu80000

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...
28/02/2008, 14h02
Duc Lebowski

Il faut que ta servlet redirige vers une jsp qui ne contient que le code HTML du div que tu souhaites rafraîchir...
28/02/2008, 14h14
manu80000

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...
28/02/2008, 14h36
Duc Lebowski

Oui je veux bien voir le code !

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

Alors ca c'est mon code javascript que j'ai dans ma page 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
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:

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:

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:

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;
 
	}

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:

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");			
}

28/02/2008, 15h07
manu80000

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

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:

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>

28/02/2008, 15h26
manu80000

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

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:

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>
Citation:

Envoyé par manu80000

en tout cas merci beaucoup

Je suis de bonne humeur aujourd'hui :D Et puis ça m'occupe un peu :mouarf:

28/02/2008, 15h44
manu80000

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...
28/02/2008, 15h55
Duc Lebowski

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)
...
28/02/2008, 16h19
manu80000

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...