Discussion :

[luffy2mars]

bonjour à tous, pouvez-vous m'aider,

j'ai deux listes déroulantes qui sont liées par interdépendance.
Pour cela j'ai utilisé AJAX,que j'ai implémenté dans une jsp.

Le Pb est que sur FF ça marche trés bien mais que sur IE6.0 pas du tout.
je pense que cela vient du innerHtml que IE ne supporte pas car je n'utilise aucun div pouvez vous m'aider ou m'aiguiller SVP
je vous met mon code:

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
 
function getXhr()
{
     var xhr = null; 
    if(window.XMLHttpRequest)
    { // Firefox et autres
		xhr = new XMLHttpRequest();
		//alert('new XMLHttpRequest'); 
    }
    else if(window.ActiveXObject)
    { // Internet Explorer 
	    xhr = new XMLHttpRequest();
    }
    else 
   { // XMLHttpRequest non support� par le navigateur 
	   alert("Votre navigateur ne supporte pas les objets    
           XMLHTTPRequest..."); 
	   xhr = false; 
   } 
    return xhr;
}
 
function go() 
{
 
    var xhr = 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.getElementById('LC').innerHTML = leselect;
	}
    }
    sel = document.getElementById('Techno'); //Techno = structure
    techno = sel.options[sel.selectedIndex].value;
 
    // Ici on va voir comment faire du post
   xhr.open("POST","./DeuxiemeJsp.jsp?techno="+techno,true);
   // ne pas oublier �a pour le post
   xhr.setRequestHeader('Content-Type','application/x-www-form- 
   urlencoded');
   // ne pas oublier de poster les arguments
   // ici, l'id de la structure 
   xhr.send("idTechno="+techno);
 
}
</script>
 
<table border cellspacing="10px" align="center" width="60%">
<tr >
<td> 
 
	<select name="T" id="Techno" onchange="go()">
	<option value="" selected></option> 
	<%
		String RequeteSelectA= "SELECT distinct A FROM maTable order by A";
		result = statement.executeQuery(RequeteSelectA);
 
		while (result.next()) 
		{
			String A= result.getString("A");
			out.print("<option value="+ A+" >" +  A+ "</option>");
 
		}
		result.close();
	%>	
        </select>					
</td>
<td >
<select name="L" id=LC> 
	<option value="vide">ALL</option>
</select>

DeuxiemeJsp.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
 
<%	
	String A= request.getParameter("A");
 
	System.out.println("****************************");
	System.out.println("Techno Pour Liste2 :" + A);
	System.out.println("****************************");
	if(A!=null)
	{
		String RequeteSelectLC = "SELECT distinct(B) FROM maTable 
                WHERE A= '"+A+"' order by B";
                result = statement.executeQuery(RequeteSelectLC);    
                System.out.println("****RequeteSelectLC*********");
                System.out.println("Requete = " + RequeteSelectLC);
               System.out.println("*******************");
 
               while (result.next()) 
               {
        	     String B= result.getString("B");
        	     out.print("<option value="+B+">" + B+ "</option>");
        	}
                 result.close();
	}
	statement.close();
	connection.close(); 
 
%>

[E.Bzz]

Bonjour,
pour IE6 avec innerHTML, a priori il faut aussi regénérer les <select> et </select> dans ton jsp : tu ne peux pas ne modifier que les options qu'ils contiennent ...

A+

[andry.aime]

Bonjour,

pour IE6 avec innerHTML, a priori il faut aussi regénérer les <select> et </select> dans ton jsp : tu ne peux pas ne modifier que les options qu'ils contiennent ...

C'est expliqué sur le tutoriel http://siddh.developpez.com/articles/ajax/#LIV-A
Le problème vient surement de la remarque d'E.Bzz mais :

<select name="L" id=LC>

Tu dois mettre la valeur des attributs dans des quotes .

Code HTML :

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

<select name="L" id="LC">

[luffy2mars]

merci à vous deux pour votre réponses rapides.
Pour Andry je pense pas que c'est les doubles quotes c'est juste un oublie de ma part.
par contre pour e.buzz :

je ne comprend pas ce que tu veux dire ou du moins comment le traduire en code AJAX : "a priori il faut aussi regénérer les <select> et </select> dans ton jsp"

[E.Bzz]

je ne comprend pas ce que tu veux dire ou du moins comment le traduire en code AJAX : "a priori il faut aussi regénérer les <select> et </select> dans ton jsp"

Ça ne veux rien dire d'autre que ça.
Pour l'instant tu génères une liste d'options que tu intègres au select via son innerHTML

Code :

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

document.getElementById('LC').innerHTML = leselect;

Il faut simplement qu'en plus des options ton code PHP (ou ton code Javascript dans la fonction de réception Ajax) regénère les <select> et </select> et plus des options. Il faut ensuite que tu "remontes" d'un cran dans ton HTML, au niveau du <td>, donc, et que tu utilises le innerHTML du <td> (en lui donnant un id) pour intégrer le <select>, les options et le </select>.

EDIT : dans le lien de la FAQ, tu as effectivement un exemple dans le ajaxLivre.php en fin du § IV.A

A+

[andry.aime]

Ce que dit E.Bzz est expliqué sur le tutoriel que je t'ai donné .
C'est un div que tu doits rafraichir avec un innerHTML mais pas un select car avec IE, la balise select ne supporte pas innerHTML.

[luffy2mars]

ok j'ai compris j'ai mis un div

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
 
leselect = xhr.responseText;
document.getElementById('liste').innerHTML = leselect;
//On se sert de innerHTML pour rajouter les options a la liste
document.getElementById('LC').innerHTML = leselect;
 
<div id="liste">
<table>
<tr>
<td>
 
<select id="LC">meme traitement</select>
</td>
</tr>
</table>
</div>

est-ce comme ça qu'il faut faire?
car ça marche tjr pas.

par contre j'avais un erreur dans la fonction getXhr qui suit:
//erreur souligné en rouge

Code :

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

1
2
3
4
5
6
7
8
9
try 
{
	xhr = new ActiveXObject("Msxml2.XMLHTTP"); 
} 
catch (e)
{
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
}

[andry.aime]

<td>

<select id="LC">meme traitement</select>
</td>

Code :

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

1
2
3
4
5
<td>
 <div id="LC">
<select name="L"></select>
</div>
</td>

et dans le php

Code :

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

1
2
3
echo '<select name="L">';
//meme traitement pour les options
echo "</select>"

[E.Bzz]

ok j'ai compris j'ai mis un div

Heu ... visiblement non : il ne suffit pas de rajouter un div : relis.
En attendant, enlève le 2° innerHTML : en relisant tu verras qu'il ne sert à rien ...

par contre j'avais un erreur dans la fonction getXhr qui suit:
//erreur souligné en rouge

Code :

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

1
2
3
4
5
6
7
8
9
try 
{
	xhr = new ActiveXObject("Msxml2.XMLHTTP"); 
} 
catch (e)
{
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
}

Ben je sais pas quelle est la bonne version de ton code, mais tu faisais la même chose dans le if et le else donc un des 2 nav n'était pas géré ....

A+

[luffy2mars]

ok merci pour les réponses encore une fois
pour andry je ne suis pas en php mais bien dans des JSP, tu me diras c'est le meme principe

si non pour e.buzz la bonne version du code c'est celle que j'ai mise dans le premier post.
en fait j'ai remplacé les deux new ActiveXObject("") par le XMLHttpRequest() pour enelver les erreurs dans eclipse.
et je me demander si c'était pas de la que ça venait.

bon je vais voir vu que e-buzz me dit de relire je v reparcourir encore le tuto

[E.Bzz]

en fait j'ai remplacé les deux new ActiveXObject("") par le XMLHttpRequest() pour enelver les erreurs dans eclipse.
et je me demander si c'était pas de la que ça venait.

Non il faut garder les 2 versions pour gérer Firefox et IE (tu trouveras plein d'exemple de ces 2 syntaxes sur le forum)

bon je vais voir vu que e-buzz me dit de relire je v reparcourir encore le tuto

Je parlais de la discussion

A+

[luffy2mars]

andry peux tu m'aider sur ce qui disait e.buzz

"a priori il faut aussi regénérer les <select> et </select> dans ton jsp"

je ne comprend pas tt
je te remet ma fct 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
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
 
function getXhr()
{
     var xhr = null; 
    if(window.XMLHttpRequest)
    { // Firefox et autres
		xhr = new XMLHttpRequest();
		//alert('new XMLHttpRequest'); 
    }
    else if(window.ActiveXObject)
    { // Internet Explorer 
	    xhr = new XMLHttpRequest();
    }
    else 
   { // XMLHttpRequest non support� par le navigateur 
	   alert("Votre navigateur ne supporte pas les objets    
           XMLHTTPRequest..."); 
	   xhr = false; 
   } 
    return xhr;
}
 
function go() 
{
 
    var xhr = 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.getElementById('LC').innerHTML = leselect;
	}
    }
    sel = document.getElementById('Techno'); //Techno = structure
    techno = sel.options[sel.selectedIndex].value;
 
    // Ici on va voir comment faire du post
   xhr.open("POST","./DeuxiemeJsp.jsp?techno="+techno,true);
   // ne pas oublier �a pour le post
   xhr.setRequestHeader('Content-Type','application/x-www-form- 
   urlencoded');
   // ne pas oublier de poster les arguments
   // ici, l'id de la structure 
   xhr.send("idTechno="+techno);
 
}
</script>
 
<table border cellspacing="10px" align="center" width="60%">
<tr >
<td> 
 
	<select name="T" id="Techno" onchange="go()">
	<option value="" selected></option> 
	<%
		String RequeteSelectA= "SELECT distinct A FROM maTable order by A";
		result = statement.executeQuery(RequeteSelectA);
 
		while (result.next()) 
		{
			String A= result.getString("A");
			out.print("<option value="+ A+" >" +  A+ "</option>");
 
		}
		result.close();
	%>	
        </select>					
</td>
<td >
<select name="L" id=LC> 
	<option value="vide">ALL</option>
</select>

[E.Bzz]

Déjà fait

A+

[andry.aime]

Déjà fait

A+

Ben oui,
à la place de echo tu utilies out.print .

[luffy2mars]

re,
donc j'ai fait comme andry m'a indiqué ça marche toujours sur FF mais sur IE toujours pas.
je suis en train de m'arracher les cheveux dessus et je comprend pas pourquoi
j'ai parcouru je ne sais combien de forums pour savoir mais toujours rien.

je vous remet le code que j'ai fait évolué:

premiereJsp.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
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
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
 
 
<%@ page language="java" %>
<%@ page import="javax.naming.Context" %>
<%@ page import="javax.naming.InitialContext" %>
<%@ page import= "javax.naming.NamingException" %>
<%@ page import="javax.sql.DataSource" %>
<%@ page import="java.sql.*" %>
<%@ page import="java.sql.Connection" %>
<%@ page import="java.util.*" %>
<%@ page import="java.sql.Statement"%>
<%@ page import="java.util.Date"%>
<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
 
<title>List deroulants liés Ajax interdependance</title>
 
 
</head>
<body>
 
<%  
			System.out.println("JspAjaxListeTechno.jsp");
 
 
%>
 
<script type="text/javascript" >
function getXhr()
{
 
    if(window.XMLHttpRequest){ // Firefox et autres
		xhr = new XMLHttpRequest();
		 //alert('new XMLHttpRequest'); 
    }
    else if(window.ActiveXObject)
    { // Internet Explorer 
	/ * IE6 * /
	if(typeof ActiveXObject != "ActiveXObject cannot be resolved to a type"){ 
	try
	{
		xhr.ActiveXObject("Msxml2.XMLHTTP");
		alert("ok");
	}
	catch(e)
	{
	        xhr = new(xhr.ActiveXObject("Microsoft.XMLHTTP"));
		alert("Nok");
	} 
     }	
   }
   else 
   { 
		// XMLHttpRequest non support� par le navigateur 
            alert("Votre navigateur ne supporte pas les objets  
            XMLHTTPRequest..."); 
	   xhr = false; 
    } 
 
    return xhr;
}
 
 /* function go(c){
		if(!c.data.replace(/\s/g,''))
			c.parentNode.removeChild(c);
	}
 
	function clean(d){
		var bal=d.getElementsByTagName('*');
 
		for(var i=0;i<bal.length;i++)
		{
			var a=bal[i].previousSibling;
			if(a && a.nodeType==3)
				go(a);
			var b=bal[i].nextSibling;
			if(b && b.nodeType==3)
				go(b);
		}
		return d;
	}*/
function goJSP() 
{
	var xhr = getXhr();
        // ne pas oublier �a pour le post
	xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
	// ne pas oublier de poster les arguments
	// 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.getElementById('LC').innerHTML = leselect;	
	       }
        }
	sel = document.getElementById('Tec'); //A= structure
	techno = sel.options[sel.selectedIndex].value;
	// Ici on va voir comment faire du post
	xhr.open("POST","./JspAjaxListe2.jsp?A="+A,true);
	alert('idA = '+A);
	xhr.send("idA="+A);		
 
     }
 
 
 
  </script> 
 
<form action="../ValideCritere_M2"  method="post" target="analyse">		
 
		<table border cellspacing="10px" align="center" width="60%">
			<tr >
			<td> 
 
			<select name="T" id="Tec" onchange="goJSP()">
			<option value="" selected></option> 
			<%
			String RequeteSelectA = "SELECT distinct A FROM maTable order by A";
				result statement.executeQuery(RequeteSelectA);
 
				while (result.next()) 
				{
				  	String A= result.getString("A");
				    out.print("<option value="+ A+" >" +  A+     
                                     </option>");
 
				}
				result.close();
				%>	
 
				</select>					
 
				</td>
				<td >
 
 
				<div id="LC">
				<select name="L">
					<option value="All">All	</option>
 
				</select>
				</div>
				</td>
 
			         <td>
				<input type="reset"  value="Init Critere"/>			</td>
				<td>
				<input type="submit" value="Valide Critere"/>
				</td>
                                </tr>
			</table>	
				<%
				statement.close();
				connection.close(); 
				%>
</body>
</html>

deuxièmeJsp.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
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
 
<%@ page import = "com.st.wam.*" %>
<%@ page language="java" %>
<%@ page import="javax.naming.Context" %>
<%@ page import="javax.naming.InitialContext" %>
<%@ page import= "javax.naming.NamingException" %>
<%@ page import="javax.sql.DataSource" %>
<%@ page import="java.sql.*" %>
<%@ page import="java.sql.Connection" %>
<%@ page import="java.util.*" %>
<%@ page import="java.sql.Statement"%>
<%@ page import="java.util.Date"%>
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="UTF-8"%>
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
 
 
<head>
 
<title>List deroulants liés Ajax interdependance</title>
</head>
<%  
			System.out.println("JSPAjax2.jsp");
 
			Connection connection = null;
    		Statement statement = null;
   		    ResultSet result = null;
   		    DataSource dataSource = null ;
   		 	try 
   		 	{
	 			dataSource = (DataSource)new InitialContext().lookup("java:jdbc/st-datasource");
	            connection = dataSource.getConnection();
	            statement = connection.createStatement(ResultSet.TYPE_SCROLL_SENSITIVE,
	                                                   ResultSet.CONCUR_READ_ONLY);
 
 			} catch (NamingException e) 
 			{
 				e.printStackTrace();
 			}
 
 
 
%>
 
 
 
<%
 
	out.println("<select name='L'>");
 
	String A= request.getParameter("A");
 
	System.out.println("****************************");
	System.out.println("APour Liste2 :" + A);
	System.out.println("****************************");
	if(A!=null)
	{
		String RequeteSelectLC = "SELECT distinct(latticecode) FROM maTable WHERE techno = '"+techno+"' order by latticecode";
        result = statement.executeQuery(RequeteSelectLC);
        System.out.println("*********RequeteSelectLC*******************");
        System.out.println("Requete = " + RequeteSelectLC);
        System.out.println("*********************************");
 
        while (result.next()) 
        {
 
        	String latticecode = result.getString("latticecode");
        	out.print("<option value="+latticecode +">" + latticecode  + "</option>");
 
        }
        result.close();
	}
	statement.close();
	connection.close(); 
	out.println("</select>");
%> 
 
 
</html>

[andry.aime]

Re,
1-

sel = document.getElementById('Tec'); //A= structure
techno = sel.options[sel.selectedIndex].value;
// Ici on va voir comment faire du post
xhr.open("POST","./JspAjaxListe2.jsp?A="+A,true);
alert('idA = '+A);

A n'est pas déclaré.
2-

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>


<head>

<title>List deroulants liés Ajax interdependance</title>
</head>

La page appelé par AJAX ne doit avoir que la génération du select sans doctype, balise head, body, ...