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

Version imprimable

09/05/2007, 18h06
carusier

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

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.
10/05/2007, 09h12
jmulans

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 :)
10/05/2007, 09h47
carusier

Aucune c'est bien la le problème :? !

J'ai tenté des recherches mais je ne trouve pas d'exemple lié à mon problème ...
10/05/2007, 09h54
jmulans

ah aucune d'accord :mrgreen:
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

j'ai un peu de temps :D

le javascript :

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

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

10/05/2007, 10h09
carusier

ah super, merci !

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

Merci encore.
10/05/2007, 10h15
jmulans

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

oublie pas le header dans ta page php ;)
10/05/2007, 11h19
carusier

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

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

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

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"

Encore un petit souci :roll: :

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

10/05/2007, 13h13
jmulans

essaye en GET peut etre
10/05/2007, 13h33
carusier

Non hélas j'ai tenté mais rien ne change !

Je crois que c'est plus une faute d'implémentation... Mais où ?
10/05/2007, 14h26
jmulans

met un peu plus de code parce que là je voit pas du tout ton probleme
10/05/2007, 17h37
carusier

Merci à toi ! j'ai trouvé à force de chipotage !