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