[AJAX] modification d'une page web liée à une liste déroulante

**carusier** · 09/05/2007, 18h06

Bonjour à tous,

je suis véritablement perdu

:
j'ai une liste déroulante qui contient une série de groupes (famille, couple, groupe, classe, TOUS) et j'aimerais en cliquant sur un de ces groupes, afficher la liste de personnes en conséquence. Cette liste de personnes n’est pas une liste déroulante, c’est un listing généré par un select-SQL (select * from personnes where group_id=$valeurchoisieparlutilisateurdanslalistederoulante).

Ce listing de personnes est affiché juste en dessous de ma liste déroulante, de manière brute sur la page WEB.

Comment puis-je réaliser cela ?

Merci d'avances pour vos réponses.

**jmulans** · 10/05/2007, 09h12

tu peut le faire en passant un XML, tu devrais trouver de bons tuto la dessus a mon avis, apres ça depend de ton degré de connaissance en AJAX

**carusier** · 10/05/2007, 09h47

Aucune c'est bien la le problème

!

J'ai tenté des recherches mais je ne trouve pas d'exemple lié à mon problème ...

**jmulans** · 10/05/2007, 09h54

ah aucune d'accord

bon en fait j'ai fait un peu la meme chose moi, mais c'etais en ASP et pas en PHP (je sais pas ce que tu utilises)
j'essaierais de te mettre ça dans la journée en version "simplifiée" pour que tu voit

**jmulans** · 10/05/2007, 10h05

j'ai un peu de temps

le javascript :

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
// envoie la requete AJAX qui recupere les demandeurs
function RunDemandeurs(){
 
	var service = document.getElementById("LServices").value;
 
	xhr_url = "DisplayDemandeurs.asp";
 
	if ( window.XMLHttpRequest ) {
		// Objet XmlHttpRequest pour les moteurs GECKO
		xhr_object = new XMLHttpRequest();   
	} else if ( window.ActiveXObject ) {
		// Objet XmlHttpRequest pour Internet Explorer
		xhr_object = new ActiveXObject( 'Microsoft.XMLHTTP' );   
	} else {
		// Navigateur non-compatible
		alert( 'Votre navigateur ne supporte pas les objets XMLHTTPRequest...' );   
		return;
	}
 
	xhr_url += "?service="+service;
 
	xhr_object.open("GET", xhr_url, true);
 
	xhr_object.onreadystatechange = DisplayDemandeurs;
 
	// On envoi la requete
	xhr_object.send(null);
 
}
 
// affichage des demandeurs
function DisplayDemandeurs(){
 
	if ( xhr_object.readyState == 1 ){
 
	}
	if ( xhr_object.readyState == 4 ){
		var Demandeurs = new CreerListeDemandeurs("LDemandeur", 8, 150);
 
		var XMLDemandeurs = xhr_object.responseXML;
		var nb_demandeurs = XMLDemandeurs.getElementsByTagName("numero").length;
		var i = 0;
 
		if (document.layers){
			var Z="<SELECT style=\"font-size:11px;\" ondblclick=\"TransfertListe('LDemandeur','Aafficher');\" id="+Demandeurs.nom+" name="+Demandeurs.nom+" size="+Demandeurs.hauteur+">";
		} else {
			var Z="<SELECT style=\"font-size:11px;\" ondblclick=\"TransfertListe('LDemandeur','Aafficher');\" id="+Demandeurs.nom+" name="+this.nom+" size="+Demandeurs.hauteur+" style='width:"+Demandeurs.largeur+"'>";
		}
 
		Z+="<OPTION value=\"Tous\">Tous</OPTION>";
		for(i=0;i<nb_demandeurs;i++){
			var numero = XMLDemandeurs.getElementsByTagName("numero")[i].firstChild.nodeValue;
			var nom = XMLDemandeurs.getElementsByTagName("nom")[i].firstChild.nodeValue;
			var prenom = XMLDemandeurs.getElementsByTagName("prenom")[i].firstChild.nodeValue;
			Demandeurs.Add(nom+" "+prenom);
			Z+="<OPTION value=\""+numero+"\">"+nom+" "+prenom+"</OPTION>";
		}
 
		Z+="</SELECT>";
 
		document.getElementById("demandeur").innerHTML = Z;
	}
}

ça c'est mon code Javascript
dans ma base j'ai des services auquel appartiennent des demandeurs, et je veut recupere tous les demandeurs d'1 service
dans RunDemandeurs je recupere le service, puis je l'envoie à ma page asp

ensuite dans DisplayDemandeurs je recupere ce que l'asp me renvoie (en XML) et je l'affiche (moi je le met dans une liste mais tu fait ce que tu veut)
voila la page asp :

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
service = RSCPTR("service")
 
SQLREQ = "Select * FROM [Demandeur]"
SQLREQ = SQLREQ & " Where num_service = "& service
SQLREQ = SQLREQ & " Order By nom_demandeur DESC"
Set RS = Server.Createobject("ADODB.Recordset")
RS.Open SQLREQ,Conn , 3, 3
 
result = "<?xml version=""1.0"" encoding=""UTF-8""?>"
result = result & "<demandeurs>"
 
while not RS.eof 
 
	numero = RS("numero_demandeur")
	nom = rdb_txt(RS("nom_demandeur"))
	prenom = rdb_txt(RS("prenom_demandeur"))
 
		result = result & "<demandeur>"
			result = result & "<numero>"
				result = result & numero	
			result = result & "</numero>"
			result = result & "<nom>"
				result = result & nom 	
			result = result & "</nom>"
			result = result & "<prenom>"
				result = result & prenom
			result = result & "</prenom>"
		result = result & "</demandeur>"
 
	RS.movenext
wend
 
result = result & "</demandeurs>"
 
Response.Write result

là en gros je recupere le service que j'ai envoyé, je fait la requete à partir du service, puis j'envoie un XML contenant tous mes demandeurs

voila j'espere que ça t'aidera un peu

**carusier** · 10/05/2007, 10h09

ah super, merci !

Je vais essayer de m'inspirer de ton code ! Oui en effet j'utilise du php !

Merci encore.

**jmulans** · 10/05/2007, 10h15

je pense pas qu'il y ai beaucoup de souci pour transformer l'asp en php

oublie pas le header dans ta page php

**carusier** · 10/05/2007, 11h19

Petit souci :

En lisant ton code, j'ai l'impression que tu as deux listes déroulantes liées, celle des services et des demandeurs. Quant à moi, je n'ai qu'une liste déroulante. Comme je l'explique plus haut j'ai une liste déroulante avec des groupes et en cliquant sur un des groupes, j'aimerais afficher un listing ("brute" sur une page web, tout bête) de personnes avec nom, prénom, adresse, email ...

**jmulans** · 10/05/2007, 11h40

oui comme tu voit moi j'affiche la liste des demandeurs dans une liste :

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
var Demandeurs = new CreerListeDemandeurs("LDemandeur", 8, 150);
 
		var XMLDemandeurs = xhr_object.responseXML;
		var nb_demandeurs = XMLDemandeurs.getElementsByTagName("numero").length;
		var i = 0;
 
		if (document.layers){
			var Z="<SELECT style=\"font-size:11px;\" ondblclick=\"TransfertListe('LDemandeur','Aafficher');\" id="+Demandeurs.nom+" name="+Demandeurs.nom+" size="+Demandeurs.hauteur+">";
		} else {
			var Z="<SELECT style=\"font-size:11px;\" ondblclick=\"TransfertListe('LDemandeur','Aafficher');\" id="+Demandeurs.nom+" name="+this.nom+" size="+Demandeurs.hauteur+" style='width:"+Demandeurs.largeur+"'>";
		}
 
		Z+="<OPTION value=\"Tous\">Tous</OPTION>";
		for(i=0;i<nb_demandeurs;i++){
			var numero = XMLDemandeurs.getElementsByTagName("numero")[i].firstChild.nodeValue;
			var nom = XMLDemandeurs.getElementsByTagName("nom")[i].firstChild.nodeValue;
			var prenom = XMLDemandeurs.getElementsByTagName("prenom")[i].firstChild.nodeValue;
			Demandeurs.Add(nom+" "+prenom);
			Z+="<OPTION value=\""+numero+"\">"+nom+" "+prenom+"</OPTION>";
		}
 
		Z+="</SELECT>";
 
		document.getElementById("demandeur").innerHTML = Z;

mais si tu veut la mettre "en brut" c'est simple, au lieu de les mettre dans une liste tu les met dans un div :

Code :

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

1
2
3
4
5
6
7
8
9
10
 
Z = ""
for(i=0;i<nb_demandeurs;i++){
var numero = XMLDemandeurs.getElementsByTagName("numero")[i].firstChild.nodeValue;
var nom = XMLDemandeurs.getElementsByTagName("nom")[i].firstChild.nodeValue;
var prenom = XMLDemandeurs.getElementsByTagName("prenom")[i].firstChild.nodeValue;
Z += nom + " " + prenom + "<br/>"
}
 
document.getElementById("demandeur").innerHTML = Z;

a la fin "demandeur" c'est une div d'id "demandeur"

**carusier** · 10/05/2007, 12h59

Encore un petit souci

:

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
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 {
                   alert("Your browser doesn't support XMLHTTPRequest...");
                   xhr = false;
                }
                return xhr;
        }
 
        function go(){
                var xhr = getXhr();
 
                xhr.open("POST","listing_personne.php",true);
                xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
                sel = document.getElementById('stid_list');
                idstatus = sel.options[sel.selectedIndex].value;
                xhr.send("idStatus="+idstatus);
        }

Ces deux fonctions se trouvent dans le fichier listing_personne.php et plus bas je fais un test (dans le code php) : echo $_POST['idStatus'];. Mais ça ne m'affiche RIEN ! Pourtant j'envoie bien l'idStatus au bon endroit autrement dit dans : listing_personne.php... ?