[AJAX] Encore 3 listes liées, je comprends pas ce qui ne marche pas

Version imprimable

Bonjour ca fait 3 jours que je regarde mes codes mais ca ne marche pas! Si quelqu'un veut bien m'aider je serais tres content.

Je vous donne toutes mes pages.

Page auteurs.php

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
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
 
<html> 
<head> 
<title>Tutoriel Ajax (XHTML + JavaScript + XML)</title> 
<script type='text/javascript'> 
 
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 { // XMLHttpRequest non supporté par le navigateur 
alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
xhr = false; 
} 
return xhr; 
} 
 
/** 
* Méthode qui sera appelée sur le click du bouton 
*/ 
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('livre').innerHTML = leselect; 
} 
} 
 
// Ici on va voir comment faire du post 
xhr.open("POST","ajaxLivre.php",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 l'auteur 
sel = document.getElementById('auteur'); 
idauteur = sel.options[sel.selectedIndex].value; 
xhr.send("idAuteur="+idauteur); 
} 
 
function golivre(){ 
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('prix').innerHTML = leselect; 
} 
} 
 
// Ici on va voir comment faire du post 
xhr.open("POST","ajaxPrix.php",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 l'auteur 
sel = document.getElementById('livre'); 
idlivre = sel.options[sel.selectedIndex].value; 
xhr.send("idLivre="+idlivre); 
} 
</script> 
</head> 
<body> 
<form> 
<fieldset style="width: 500px"> 
<legend>Liste liées</legend> 
<label>Auteurs</label> 
<select name='auteur' id='auteur' onchange='go()'> 
<option value='-1'>Aucun</option> 
<?php 
mysql_connect("localhost","root",""); 
mysql_select_db("test"); 
$res = mysql_query("SELECT * FROM auteur ORDER BY nom"); 
while($row = mysql_fetch_assoc($res)){ 
echo "<option value='".$row["id"]."'>".$row["nom"]."</option>"; 
} 
?> 
</select> 
<label>Livres</label> 
<div id='livre' style='display:inline'> 
<select name='livre'> 
<option value='-1'>Choisir un auteur</option> 
</select> 
</div> 
<label>Prix</label> 
<div id='prix' style='display:inline'> 
<select name='prix'> 
<option value='-1'>Choisir un prix</option> 
</select> 
</div> 
</fieldset> 
</form> 
</body> 
</html>

///////////////////////////////////////////////////////
page ajaxLivre.php

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
<?php 
 
echo "<select name='livre' id='livre' onchange='golivre()'>"; 
if(isset($_POST["idAuteur"])){ 
mysql_connect("localhost","root",""); 
mysql_select_db("test"); 
$res = mysql_query("SELECT * FROM livre WHERE idAuteur=".$_POST["idAuteur"]." ORDER BY titre"); 
while($row = mysql_fetch_assoc($res)){ 
echo "<option value='".$row["id"]."'>".$row["titre"]."</option>"; 
} 
} 
echo "</select>"; 
 
?>

////////////////////////////////////////////////

page ajaxPrix.php

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<?php 
echo "<select name='prix'>"; 
if(isset($_POST["idLivre"])){ 
mysql_connect("localhost","root",""); 
mysql_select_db("test"); 
$res = mysql_query("SELECT id,prix FROM prixlivre 
WHERE idLivre=".$_POST["idLivre"]." ORDER BY prix"); 
while($row = mysql_fetch_assoc($res)){ 
echo "<option value='".$row["id"]."'>".$row["prix"]."</option>"; 
} 
} 
echo "</select>"; 
?>

//////////////////////////

les tables
--
-- Table structure for table `auteur`
--

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
64
65
66
67
68
69
70
71
72
 
CREATE TABLE IF NOT EXISTS `auteur` ( 
`id` tinyint(4) NOT NULL AUTO_INCREMENT, 
`nom` varchar(50) NOT NULL, 
PRIMARY KEY (`id`) 
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=5 ; 
 
-- 
-- Dumping data for table `auteur` 
-- 
 
INSERT INTO `auteur` (`id`, `nom`) VALUES 
(1, 'Clive Cussler'), 
(2, 'Harlan Coben'), 
(3, 'Franck Herbert'), 
(4, 'Pierre Bordages'); 
 
-- Table structure for table `livre` 
-- 
 
CREATE TABLE IF NOT EXISTS `livre` ( 
`id` tinyint(4) NOT NULL AUTO_INCREMENT, 
`titre` varchar(50) NOT NULL, 
`idAuteur` tinyint(4) DEFAULT NULL, 
PRIMARY KEY (`id`) 
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=12 ; 
 
-- 
-- Dumping data for table `livre` 
-- 
 
INSERT INTO `livre` (`id`, `titre`, `idAuteur`) VALUES 
(1, 'Odyssee', 1), 
(2, 'Sahara', 1), 
(3, 'Dragon', 1), 
(4, 'Une chance de trop', 2), 
(5, 'Ne le dis a personne', 2), 
(6, 'Disparu ? jamais', 2), 
(7, 'Dune', 3), 
(8, 'La barriere de santaroga', 3), 
(9, 'Les guerriers du silence', 4), 
(10, 'La citadelle hyponeros', 4), 
(11, 'Terra mater', 4); 
 
 
-- 
-- Table structure for table `prixlivre` 
-- 
 
CREATE TABLE IF NOT EXISTS `prixlivre` ( 
`id` tinyint(4) NOT NULL AUTO_INCREMENT, 
`prix` varchar(50) NOT NULL, 
`idLivre` tinyint(4) DEFAULT NULL, 
PRIMARY KEY (`id`) 
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=12 ; 
 
-- 
-- Dumping data for table `prixlivre` 
-- 
 
INSERT INTO `prixlivre` (`id`, `prix`, `idLivre`) VALUES 
(1, '45', 1), 
(2, '32', 1), 
(3, '23', 1), 
(4, '78', 2), 
(5, '45', 2), 
(6, '109', 2), 
(7, '87', 3), 
(8, '29', 3), 
(9, '12', 4), 
(10, '123', 4), 
(11, '332', 4);

Merci de votre aide

08/09/2009, 00h41
emmanuel.remy
Salut,

Dans un premier temps, il ne faut pas avoir des attributs name et id identiques sur deux balises différentes:
Code:

1 2 <div id='livre' style='display:inline'> <select name='livre'>
. Car IE ne distingue pas name et id dans ses fonctions.

ERE
08/09/2009, 04h55
Jeol2007
Citation:
Envoyé par emmanuel.remy

Salut,

Dans un premier temps, il ne faut pas avoir des attributs name et id identiques sur deux balises différentes:

Code:

1 2 <div id='livre' style='display:inline'> <select name='livre'>

. Car IE ne distingue pas name et id dans ses fonctions.

ERE
Merci pour la reponse mais ca n'affiche rien.
08/09/2009, 10h23
emmanuel.remy

Salut,

Passe ton code modifié.

ERE

Salut,
Plutôt que de mettre le onchange sur ton select généré, crée-le dans le callback :

Code:

1
2
3
4
5
6
7
8
9
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('livre').innerHTML = leselect;
document.getElementById('livre').onchange = golivre;
} 
}

commence a voir quelque chose!

Merci a vous Bovino! je commence a voir les prix mais il y a encore des problemes

Auteur : Clive Cussler - Livres :Dragon (avec tous les autres livres dans la liste) - Prix : Choisir un prix(sans les autres prix dans la liste)
4) Si je choisi dans livre Odysse j’aurai le prix :
Auteur : Clive Cussler - Livres :Odysse (avec tous les autres livres dans la liste) - Prix : 45 (sans les autres prix dans la liste)
5) Si je retourne a Dragon
Auteur : Clive Cussler - Livres :Dragon (avec tous les autres livres dans la liste) - Prix : 29 (sans les autres prix dans la liste)
6) quand je choisi un autre prix le dernier prix reste.

Voici les pages.

auteurs.php

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
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
<html> 
<head> 
<title>Tutoriel Ajax (XHTML + JavaScript + XML)</title> 
<script type='text/javascript'> 
 
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 { // XMLHttpRequest non supporté par le navigateur 
alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
xhr = false; 
} 
return xhr; 
} 
 
/** 
* Méthode qui sera appelée sur le click du bouton 
*/ 
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('lelivre').innerHTML = leselect; 
document.getElementById('lelivre').onchange = golivre;
 
} 
} 
 
// Ici on va voir comment faire du post 
xhr.open("POST","ajaxLivre.php",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 l'auteur 
sel = document.getElementById('auteur'); 
idauteur = sel.options[sel.selectedIndex].value; 
xhr.send("idAuteur="+idauteur); 
} 
 
function golivre(){ 
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('leprix').innerHTML = leselect; 
} 
} 
 
// Ici on va voir comment faire du post 
xhr.open("POST","ajaxPrix.php",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 l'auteur 
sel = document.getElementById('livre'); 
idlivre = sel.options[sel.selectedIndex].value; 
xhr.send("idLivre="+idlivre); 
} 
</script> 
</head> 
<body> 
<form> 
<fieldset style="width: 500px"> 
<legend>Liste liées</legend> 
<label>Auteurs</label> 
<select name='auteur' id='auteur' onchange='go()'> 
<option value='-1'>Aucun</option> 
<?php 
mysql_connect("localhost","root",""); 
mysql_select_db("test"); 
$res = mysql_query("SELECT * FROM auteur ORDER BY nom"); 
while($row = mysql_fetch_assoc($res)){ 
echo "<option value='".$row["id"]."'>".$row["nom"]."</option>"; 
} 
?> 
</select> 
<label>Livres</label> 
<div id='lelivre' style='display:inline'> 
<select name='livre' id='livre'> 
<option value='-1'>Choisir un auteur</option> 
</select> 
</div> 
<label>Prix</label> 
<div id='leprix' style='display:inline'> 
<select name='prix' id='prix'> 
<option value='-1'>Choisir un prix</option> 
</select> 
</div> 
</fieldset> 
</form> 
</body> 
</html>

/////////////////////

ajaxLivre.php

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<?php 
 
echo "<select name='livre' id='livre'>"; 
if(isset($_POST["idAuteur"])){ 
mysql_connect("localhost","root",""); 
mysql_select_db("test"); 
$res = mysql_query("SELECT * FROM livre WHERE idAuteur=".$_POST["idAuteur"]." ORDER BY titre"); 
while($row = mysql_fetch_assoc($res)){ 
echo "<option value='".$row["id"]."'>".$row["titre"]."</option>"; 
} 
} 
echo "</select>"; 
 
?>

/////////////////////////////

ajaxPrix.php

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
<?php 
echo "<select name='prix'>"; 
if(isset($_POST["idLivre"])){ 
mysql_connect("localhost","root",""); 
mysql_select_db("test"); 
$res = mysql_query("SELECT id,prix FROM prixlivre 
WHERE idLivre=".$_POST["idLivre"]." ORDER BY prix"); 
while($row = mysql_fetch_assoc($res)){ 
echo "<option value='".$row["id"]."'>".$row["prix"]."</option>"; 
} 
} 
echo "</select>"; 
?>

Merci pour votre aide

09/09/2009, 13h46
Bovino

Citation:

Envoyé par Jeol2007

Auteur : Clive Cussler - Livres : Dragon (avec tous les autres livres dans la liste) - Prix : Choisir un prix(sans les autres prix dans la liste)
4) Si je choisi dans livre Odysse j’aurai le prix :
Auteur : Clive Cussler - Livres : Odysse (avec tous les autres livres dans la liste) - Prix : 45 (sans les autres prix dans la liste)
5) Si je retourne a Dragon
Auteur : Clive Cussler - Livres : Dragon (avec tous les autres livres dans la liste) - Prix : 29 (sans les autres prix dans la liste)
6) quand je choisi un autre prix le dernier prix reste.

Tu fais ta recherche de prix sur un livre, il ne doit donc y avoir qu'un seul prix correspondant je pense :?
09/09/2009, 13h51
Jeol2007

Citation:

Envoyé par Bovino

Tu fais ta recherche de prix sur un livre, il ne doit donc y avoir qu'un seul prix correspondant je pense :?

Oui c'est vrai mais le probleme c'est quand je choisi un auteur automatiquement un livre apparait mais le prix pour le livre n'apparait pas, alors que quand je rechoisis le livre le prix apparait. Et le prix reste si je choisi un autre auteur, ce qui me fait penser qu'il n'y a pas de lien entre auteur et prix, mais livre et prix.

Ah d'accord...
C'est un comportement normal puisque lorsque tu insères ta 2e liste, il s'agit de son état initial, il n'y a donc pas de onchange déclenché et pas de recherche de prix.
Il faut que tu lances manuellement la fonction golivre() une fois la liste des livres ajoutée.
Code:

1 2 3 4 5 6 7 8 9 10 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('livre').innerHTML = leselect; document.getElementById('livre').onchange = golivre; golivre(); } }

09/09/2009, 14h04
Jeol2007

Bien, Bien Bien:D

Ca marche tres bien.

Mais il y a une chose:

- Il y a un bug avec internet explorer, quand je choisi un livre, le prix ne change pas tandis que ca fonctionne sur firefox.

Merci a toi bovino!

Edit:Il n'y a qu'un seul probleme et ce n'est qu'avec internet explore
15/10/2009, 08h33
Jeol2007

Jusqu'a present j'ai toujours le meme probleme quand je selectionne une option qui pas de valeur dans la troisieme il m'affiche toujours la derniere valeur affichee
15/10/2009, 10h14
andry.aime

Bonjour,
Testes la valeur de l'option sélectionnée avant d'afficher la valeur ou de le cacher.
21/10/2009, 10h23
Jeol2007

Merci tout est ok maintenant.
24/03/2010, 19h15
artkap

Bonjour,

pourriez-vous expliquer la solution pour IE, car chez moi aussi tout fonctionne sauf sous Internet Explorer...

Merci !
25/03/2010, 06h10
andry.aime

Bonjour,
On ne voit pas ce que tu as fait mais je te conseille ne pas utiliser innerHTML mais de remplir les listes favec un retour XML :fleche: Une discussion résolue.
25/03/2010, 10h04
artkap

Aurais-tu un exemple simple de construction avec un retour XML ?
Cela sous-entends-t-il que IE ne gère pas le innerHTML ?
25/03/2010, 10h09
andry.aime

Citation:

Envoyé par artkap

Aurais-tu un exemple simple de construction avec un retour XML ?

:fleche: http://www.developpez.net/forums/d77...x/#post4489970

Citation:

Envoyé par artkap

Cela sous-entends-t-il que IE ne gère pas le innerHTML ?

IE gère mal les éléments créés avec innerHTML.