[DOM] Menus déroulants dynamiques par groupes

**Bovino** · 07/08/2008, 18h07

Oui, tu as raison, il faut faire un echo de $buffer à la fin de ajaxLivres.php.

Sinon, tu as juste déplacé ton problème :

Code :

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

var nomLivres = srv.getElementsByTagName("NomsLivres")[0].firstChild.nodeValue;

IL N'Y A PAS DE BALISE <NomLivres> DANS TON XML !!! Ne confonds pas la variable php et un tag xml !

Code :

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

var nomLivres = srv.nodeValue;

devrait suffire.

**carmi** · 07/08/2008, 18h33

alors, j'ai installé firebug.

grâce a ce module j'ai pu m'apercevoir qu'il y avait une "}" en trop visiblement dans mon fichier fonction.js (le dernier "}" )

j'ai ensuite remarqué que dans mon fichier ajaxLivres.php

Code :

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

1
2
header('Content-Type: text/xml');
	echo $buffer;

donnait une erreur qui n'apparait plus avec "print"

Code :

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

1
2
header('Content-Type: text/xml');
	print $buffer;

--- Mise à jour des codes de mon poste précédent suite aux dernières modifications ---

Maintenant sur ma page pagechoixauteurs.php, firebug me donne bien un

NomsAuteurs MR ZZZ

en tant que POST http://localhost/XXXX/ajaxLivres.php

mais en reponse il me donne ceci :

Warning: mysql_fetch_assoc(): supplied argument is not a valid MySQL result resource in C
:\xampp\htdocs\XXXXX\ajaxLivre.php on line 21 
 
Warning: Cannot modify header information - headers already sent by (output started at C:\xampp
\htdocs\XXXXX\ajaxLivre.php:21) in C:\xampp\htdocs\XXXXX\ajaxLivre.php on line 25 
<?xml version="1.0"?><liste></liste>

et s'est apparament arreté a la ligne 29 de fonction.js à savoir :

Code :

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

xhrT.send(arg);

ça progresse et j'apprends beaucoup!

**carmi** · 07/08/2008, 21h45

pouvez vous m'expliquer a quoi sert le

Code :

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

header('Content-Type: text/xml');

Dans ajaxLivres.php

car quand je l'enleve, je n'ai que

Warning: mysql_fetch_assoc(): supplied argument is not a valid MySQL result resource in C
:\xampp\htdocs\XXXXX\ajaxLivre.php on line 21

au lieu de

Warning: mysql_fetch_assoc(): supplied argument is not a valid MySQL result resource in C
:\xampp\htdocs\XXXXX\ajaxLivre.php on line 21 
 
Warning: Cannot modify header information - headers already sent by (output started at C:\xampp
\htdocs\XXXXX\ajaxLivre.php:21) in C:\xampp\htdocs\XXXXX\ajaxLivre.php on line 25 
<?xml version="1.0"?><liste></liste>

Edit : Dans mon fichier fonction.js ne faut il pas un petit "eval" quelquepart?

**Katachana** · 08/08/2008, 11h05

enleve le alors

Sinon tu as une erreur dans ta requete,essaye comme ca :

Code :

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

$res = mysql_query("SELECT NomsLivres FROM bibliotheque WHERE NomsAuteurs = '".$_POST['NomsAuteurs']."'");

**carmi** · 08/08/2008, 17h58

merci pour votre réponse. la solution est proche!!

J'ai bien effectuée les modifs suite à votre poste.

ce qui me donnait cette réponse de firebug en choisissant Mr XXX dans ma première ligne :

<?xml version="1.0"?><liste><NomsAuteur>AAAA</NomsAuteurs><NomsAuteur>BBBB</NomsAuteurs><NomsAuteur>CCCC

</NomsAuteurs></liste>

Je pense que <NomsAuteur> devrait etre remplacé par <NomsLivres> vue que la réponse est le noms des livres?

Je l'ai donc remplacé dans mon fichier ajaxLivres.php

Code :

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

1
2
3
while($row = mysql_fetch_assoc($res)){
$buffer .='<NomsAuteurs>'.$row['NomsLivres'].'</NomsAuteurs>';
}

Par

Code :

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

1
2
3
while($row = mysql_fetch_assoc($res)){
$buffer .='<NomsLivres>'.$row['NomsLivres'].'</NomsLivres>';
}

J'ai maintenant la bonne réponse du post à savoir :

<?xml version="1.0"?><liste><NomsLivres>AAAA</NomsLivres><NomsLivres>BBBB</NomsLivres><NomsLivres>CCCC

</NomsLivres></liste>

Seulement ma seconde liste reste toujours vide.

Ne doit il pas y avoir un "eval" quelque part?

J'ai aussi une erreur dans mon fichier fonction.js

selbox.length has no properties
onreadystatechange()fonction.js (line 49)
[Break on this error] selbox.options[selbox.length] = new_elem;

voici les sources de ce fichier fonction.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
function getXhrTrap(){
	if(window.XMLHttpRequest) // Firefox et autres
	   var xhrT = new XMLHttpRequest();
	else if(window.ActiveXObject){ // Internet Explorer
	   try {
                var xhrT = new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e) {
                var xhrT = new ActiveXObject("Microsoft.XMLHTTP");
            }
	}
	else { // XMLHttpRequest non support2 par le navigateur
	   alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
	   var xhrT = false;
	}
	return xhrT;
}
 
function getLivres(NomsAuteurs) {
 
//Passe le nom de l'auteur en parametre de l'url
var NomsAuteurs = document.getElementById('auteur').options[document.getElementById('auteur').selectedIndex].value;
var arg = 'NomsAuteurs='+NomsAuteurs;
 
 
	var xhrT = getXhrTrap();
 
	xhrT.open("POST","ajaxLivre.php",true);
	xhrT.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
	xhrT.send(arg);
 
	// On defini ce qu'on va faire quand on aura la reponse
	xhrT.onreadystatechange = function()
	{	
		// On ne fait quelque chose que si on a tout recu et que le serveur est ok
		if(xhrT && xhrT.readyState == 4 && xhrT.status == 200 && xhrT.responseXML)
		{
			reponseT = xhrT.responseXML.documentElement;
			var livres = reponseT.getElementsByTagName("NomsLivres");
//la tu recuperes le select dans lequel tu veux ajouter des elements
var selbox = document.getElementById("livre");
 
 
				for (var i = 0 ; i < livres.length ; i++) {
					var srv = livres[i];
					var NomsLivres = srv.nodeValue;
 
//La tu ajoutes les livres dans le SELECT
new_elem = new Option(name,i);
				selbox.options[selbox.length] = new_elem;
				}
		}
	}
	}

Notez que j'ai changer la variable

Code :

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

var nomLivres = srv.nodeValue;

par

Code :

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

var NomsLivres = srv.nodeValue;

**Bovino** · 09/08/2008, 07h09

Code :

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

selbox.appendChild(new_elem);

**carmi** · 09/08/2008, 09h07

Bonjour à vous!

Donc, avec mon fichier fonction.js ainsi :

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
function getXhrTrap(){
	if(window.XMLHttpRequest) // Firefox et autres
	   var xhrT = new XMLHttpRequest();
	else if(window.ActiveXObject){ // Internet Explorer
	   try {
                var xhrT = new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e) {
                var xhrT = new ActiveXObject("Microsoft.XMLHTTP");
            }
	}
	else { // XMLHttpRequest non support2 par le navigateur
	   alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
	   var xhrT = false;
	}
	return xhrT;
}
 
function getLivres(NomsAuteurs) {
 
//Passe le nom de l'auteur en parametre de l'url
var NomsAuteurs = document.getElementById('auteur').options[document.getElementById('auteur').selectedIndex].value;
var arg = 'NomsAuteurs='+NomsAuteurs;
 
 
	var xhrT = getXhrTrap();
 
	xhrT.open("POST","ajaxLivre.php",true);
	xhrT.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
	xhrT.send(arg);
 
	// On defini ce qu'on va faire quand on aura la reponse
	xhrT.onreadystatechange = function()
	{	
		// On ne fait quelque chose que si on a tout recu et que le serveur est ok
		if(xhrT && xhrT.readyState == 4 && xhrT.status == 200 && xhrT.responseXML)
		{
			reponseT = xhrT.responseXML.documentElement;
			var livres = reponseT.getElementsByTagName("NomsLivres");
//la tu recuperes le select dans lequel tu veux ajouter des elements
var selbox = document.getElementById("livre");
 
 
				for (var i = 0 ; i < livres.length ; i++) {
					var srv = livres[i];
					var NomsLivres = srv.nodeValue;
 
//La tu ajoutes les livres dans le SELECT
 
new_elem = new Option(name,i);
 
				selbox.appendChild(new_elem);
				selbox.options[selbox.length] = new_elem;
				}
		}
	}
	}

j'ai ceci de firebug :

selbox.length has no properties
[Break on this error] selbox.options[selbox.length] = new_elem;

et avec ceci dans fonction.js :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
//...
 
//La tu ajoutes les livres dans le SELECT
 
new_elem = new Option(name,i);
 
				selbox.appendChild(new_elem);
//selbox.options[selbox.length] = new_elem;
				}
		}
	}
	}

Je n'ai plus d'erreurs, le POST de ma page est bon :

<?xml version="1.0"?><liste><NomsLivres>AAAA</NomsLivres><NomsLivres>BBBB</NomsLivres><NomsLivres>CCCC

</NomsLivres></liste>

Mais ma seconde liste reste toujours vide :s

Merci de m'avoir répondu, c'est très appréciable de se sentir écouté!

**Bovino** · 09/08/2008, 09h27

Code :

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

1
2
3
new_elem = new Option(name,i);
new_elem.innerHTML=livres[i];				
				selbox.appendChild(new_elem);

**carmi** · 09/08/2008, 09h32

Apres modification de mon fichier fonction.js ainsi :

Code :

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

1
2
3
4
5
6
7
8
/..
//La tu ajoutes les livres dans le SELECT
 
new_elem = new Option(name,i);
new_elem.setAttribute('value',livres[i]);
 
				selbox.appendChild(new_elem);
//...

Pas d'erreur, ma seconde liste reste toujours vide.

Par contre le cadre qui entoure mes deux menu déroulant s'agrandit vers le bas, à chaque choix un peu plus.

**Bovino** · 09/08/2008, 09h35

Désolé, c'est pas setAttribute mais innerHTML, j'ai modifié dans mon précédent post.

**carmi** · 09/08/2008, 09h40

Il n'y a pas de mal.

Apres modification voila ce que j'ai en image s'il vous plait :p

les "object Element" s'additionnent a chaque choix dans ma première liste.

**Katachana** · 09/08/2008, 09h43

Tu pointes sur la DIV et non pas sur le SELECT

Envoyé par Katachana

oui dans le fichier pagechoixauteurs.php, tu as :

Code :

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

1
2
3
4
5
<div id='livre' style='display:inline'>
				<select name='livre' >
					<option value='-1'>Choisir un livre</option>
				</select>
				</div>

et tu cherches dans le fichier fonction.js :

Code :

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

1
2
//la tu récupérés le select dans lequel tu veux ajouter des éléments
var selbox = document.getElementById("livre");

Il y a un souci , tu dois pointer directement sur le SELECT.

Enlever la DIV et met créé un SELECT en spécifiant l'id :

Code :

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

<select name='livre'  id='livre'>

**carmi** · 09/08/2008, 09h47

Effectivement, maintenant c'est bien ma seconde liste qui se rempli

Mais avec des "Object Element" qui s'additionnent dans la seconde liste a chaque nouveau choix dans ma première liste

**Bovino** · 09/08/2008, 09h48

Tu pointes sur la DIV et non pas sur le SELECT

Bien vu !

**Bovino** · 09/08/2008, 09h50

Peut-être comme ça :

Code :

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

selbox[i] = new Option(livres[i],i);

**Katachana** · 09/08/2008, 09h59

Ou sinon , remet cela (je suis pas un pro du innerHTML, mais il me semble qu'il ne marche pas top sous I.E):

Code :

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

1
2
new_elem = new Option(name,i); 
selbox.options[selbox.length] = new_elem;

**carmi** · 09/08/2008, 10h07

Je ne sais pas exactement ou placer

Code :

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

selbox[i] = new Option(livres[i],i);

vers la

Code :

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

1
2
3
4
new_elem = new Option(name,i);
new_elem.innerHTML=livres[i];	
 
				selbox.appendChild(new_elem);

mais peu importe l'endroit, ma seconde liste continue de se remplir de "Object Element" en s'additionnant.

par contre lorsque j'essaye de remettre

Code :

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

selbox.options[selbox.length] = new_elem;

en enlevant le "innerHTML", ma seconde liste se rempli mais en vide. il y a des choix sans caractères qui s'additionnent également.

Cela parait simple mais ça ne l'est pas autant que nous pourrions le croire :s

**Katachana** · 09/08/2008, 10h11

Oki je pense avoir enfin trouvé !

Code :

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

new_elem = new Option(livres,i);

La variable livres viens de la :

Code :

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

var livres = reponseT.getElementsByTagName("NomsLivres");

name c'etait un exemple

**Bovino** · 09/08/2008, 10h14

Code :

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

1
2
3
4
5
6
7
8
/..
//La tu ajoutes les livres dans le SELECT
selbox.options[i] = new Option(livres[i],i); 
//new_elem = new Option(name,i);
//new_elem.setAttribute('value',livres[i]);
 
				//selbox.appendChild(new_elem);
//...

**carmi** · 09/08/2008, 10h30

Oula! ^^

Alors,

voici mes différents essais dans mon fichier fonction.js :
Si je code seulement avec

Code :

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

1
2
3
4
5
//...
//La tu ajoutes les livres dans le SELECT
selbox.options[i] = new Option(Livres[i],i); 
}
//...

J'obtiens toujours "Object Element" mais cette fois, quand je clique sur Mr ZZZ qui n'a qu'un livre, il me donne qu'une seul "Object Element" si je clique ensuite sur Mr YYY qui a 2 livre cela me donne 2 reponses dans ma seconde liste. si je clique ensuite sur Mr XXX qui a 3 livres, cela me donnera 3 réponses mais si je clique ensuite à nouveau sur Mr Z qui n'a qu'un livre cela me donnera toujours 3 réponses.

ensuite

si je code ainsi :

Code :

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

1
2
3
4
5
6
7
8
9
//La tu ajoutes les livres dans le SELECT
//selbox.options[i] = new Option(livres[i],i); 
new_elem = new Option(livres,i);
new_elem.innerHTML=livres[i];	
 
				selbox.appendChild(new_elem);
 
				//selbox.options[selbox.length] = new_elem;
				}

J'ai toujours des "Object Element" qui s'aditionnent dans ma seconde liste.

Enfin, si je code ainsi :

Code :

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

1
2
3
4
5
6
7
8
9
//La tu ajoutes les livres dans le SELECT
//selbox.options[i] = new Option(livres[i],i); 
new_elem = new Option(livres,i);
//new_elem.innerHTML=livres[i];	
 
				//selbox.appendChild(new_elem);
 
				selbox.options[selbox.length] = new_elem;
				}

J'ai des "ObjectHTMLCollection" qui s'additionnent cette fois.

[DOM] Menus déroulants dynamiques par groupes

JavaScript

Discussions similaires

Partager

Partager