[DOM] Menus déroulants dynamiques par groupes

Version imprimable

Voir 40 message(s) de cette discussion en une page

07/08/2008, 18h07
Bovino

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:

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:

var nomLivres = srv.nodeValue;

devrait suffire.
07/08/2008, 18h33
carmi
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:

1 2 header('Content-Type: text/xml'); echo $buffer;
donnait une erreur qui n'apparait plus avec "print"
Code:

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

Citation:

NomsAuteurs MR ZZZ

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

mais en reponse il me donne ceci :

Citation:

 
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:

xhrT.send(arg);

ça progresse et j'apprends beaucoup!
07/08/2008, 21h45
carmi

pouvez vous m'expliquer a quoi sert le

Code:

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

Dans ajaxLivres.php

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

Citation:

 
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

Citation:

 
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?
08/08/2008, 11h05
Katachana

enleve le alors

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

Code:

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

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 :

Citation:

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

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

1 2 3 while($row = mysql_fetch_assoc($res)){ $buffer .='<NomsLivres>'.$row['NomsLivres'].'</NomsLivres>'; }
J'ai maintenant la bonne réponse du post à savoir :

Citation:

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

Citation:

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:

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:

var nomLivres = srv.nodeValue;

par

Code:

var NomsLivres = srv.nodeValue;

09/08/2008, 07h09
Bovino

Code:

selbox.appendChild(new_elem);

Bonjour à vous! :)

Donc, avec mon fichier fonction.js ainsi :

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

Citation:

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

et avec ceci dans fonction.js :

Code:

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 :

Citation:

<?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é! :)

Code:

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

09/08/2008, 09h32
carmi
Apres modification de mon fichier fonction.js ainsi :
Code:

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.
09/08/2008, 09h35
Bovino

Désolé, c'est pas setAttribute mais innerHTML, j'ai modifié dans mon précédent post.
09/08/2008, 09h40
carmi

Il n'y a pas de mal.

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

http://arkhantia.no-ip.org/img/liste.jpg

les "object Element" s'additionnent a chaque choix dans ma première liste.
09/08/2008, 09h43
Katachana
Tu pointes sur la DIV et non pas sur le SELECT ;):yaisse2::yaisse2:
Citation:
Envoyé par Katachana

oui dans le fichier pagechoixauteurs.php, tu as :

Code:

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:

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:

<select name='livre' id='livre'>
09/08/2008, 09h47
carmi

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
09/08/2008, 09h48
Bovino

Citation:

Tu pointes sur la DIV et non pas sur le SELECT

Bien vu !
09/08/2008, 09h50
Bovino

Peut-être comme ça :

Code:

selbox[i] = new Option(livres[i],i);
09/08/2008, 09h59
Katachana
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:

1 2 new_elem = new Option(name,i); selbox.options[selbox.length] = new_elem;
09/08/2008, 10h07
carmi
Je ne sais pas exactement ou placer

Code:

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

vers la
Code:

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:

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
09/08/2008, 10h11
Katachana

Oki je pense avoir enfin trouvé !

Code:

new_elem = new Option(livres,i);

La variable livres viens de la :

Code:

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

name c'etait un exemple :arf:

Code:

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);
//...

Oula! ^^

Alors,

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

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:

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:

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.

Voir 40 message(s) de cette discussion en une page