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

**Jeol2007** · 07/09/2009, 23h29

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 :

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

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

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 :

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

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 :

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

**emmanuel.remy** · 08/09/2009, 00h41

Salut,

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

Code :

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

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

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

ERE

**Jeol2007** · 08/09/2009, 04h55

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 :

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

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.

**emmanuel.remy** · 08/09/2009, 10h23

Salut,

Passe ton code modifié.

ERE

**Bovino** · 08/09/2009, 12h10

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

Code :

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

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;
} 
}

**Jeol2007** · 09/09/2009, 13h06

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

Auteur : Clive Cussler - Livres

ragon (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

ragon (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 php :

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

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

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

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

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

**Bovino** · 09/09/2009, 13h46

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

**Jeol2007** · 09/09/2009, 13h51

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.

**Bovino** · 09/09/2009, 13h55

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 :

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

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();
} 
}

**Jeol2007** · 09/09/2009, 14h04

Bien, Bien Bien

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

**Jeol2007** · 15/10/2009, 08h33

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