Ajouter des liens à des listes déroulantes liées

**NoSmoking** · 02/06/2011, 22h49

j'en conclu que c'est dans la table livre que tu dois ajouter le champ page.
tu devra surement avoir dans le fichier PHP un truc du style

Code php :

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

1
2
3
4
5
 
$res = mysql_query("SELECT page,titre FROM livre WHERE idAuteur=".$_POST["idAuteur"]." ORDER BY titre");
while($row = mysql_fetch_assoc($res)){
  echo "<option value='".$row["page"]."'>".$row["titre"]."</option>";
}

**Teelakla** · 02/06/2011, 23h41

Bon je suis totalement largué... j'ai tenté d'appliquer chacune de vos méthodes et dans les deux cas j'ai tout planté. Le fait que je sois un vrai néophyte n'arrange rien

Pour mettre les choses à plat j'ai conservé une copie de toutes les tentatives réalisées mais je repars sur les fichiers d'origine avant tout modification de manière à ce qu'on soit d'accord sur les données :

J'ai deux tables :

-auteur contient les colonnes id; nom
-livre contient les colonnes id; titre; idAuteur

J'ai deux fichiers .php :

-ajaxLivre.php
-auteurs.php

Ma première liste doit contenir les noms d'auteurs et la seconde les titres.
Le choix d'un titre doit rediriger les utilisateurs vers un lien correspondant à ce titre.

Les voici tels qu'ils sont. De cette manière ils permettent l'affichage de la seconde liste en fonction de la première mais pas la redirection.

auteurs.php :

Code html :

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
<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);
                        }
                </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>
					<?
                                                mysql_connect("localhost","root","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>
			</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
<?php
	echo "<select name='livre'>";
	if(isset($_POST["idAuteur"])){
		mysql_connect("localhost","root","root");
		mysql_select_db("test");
		$res = mysql_query("SELECT id,titre 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>";
?>

Et voilà les tables de la BDD

Code sql :

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
 
--
 
-- --------------------------------------------------------
 
--
-- Structure de la table `auteur`
--
 
CREATE TABLE IF NOT EXISTS `auteur` (
  `id` tinyint(4) NOT NULL auto_increment,
  `nom` varchar(50) collate latin1_general_ci NOT NULL,
  PRIMARY KEY  (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 COLLATE=latin1_general_ci AUTO_INCREMENT=5 ;
 
--
-- Contenu de la table `auteur`
--
 
INSERT INTO `auteur` (`id`, `nom`) VALUES
(1, 'Clive Cussler'),
(2, 'Harlan Coben'),
(3, 'Franck Herbert'),
(4, 'Pierre Bordages');
 
-- --------------------------------------------------------
 
--
-- Structure de la table `livre`
--
 
CREATE TABLE IF NOT EXISTS `livre` (
  `id` tinyint(4) NOT NULL auto_increment,
  `titre` varchar(50) collate latin1_general_ci NOT NULL,
  `idAuteur` tinyint(4) default NULL,
  PRIMARY KEY  (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 COLLATE=latin1_general_ci AUTO_INCREMENT=12 ;
 
--
-- Contenu de la 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);
 
/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;

Un énorme merci de continuer à m'aider

**12monkeys** · 02/06/2011, 23h55

Désolé je ne peux pas te conseiller, je vois que tu tente de le faire en ajax, j'en ai jamais fait, donc je ne peux pas t'aider.
En relisant toute la discussion on est tous partis sur une mauvaise piste en voulant te faire recharger la page via javascript car a part le lien vers le tutoriel, tu n'indiquait nulle part ton utilisation d'ajax.
L'exemple que je te donnais était plus simple mais aussi moins perfectionné...

**Teelakla** · 03/06/2011, 11h58

Envoyé par 12monkeys

Désolé je ne peux pas te conseiller, je vois que tu tente de le faire en ajax, j'en ai jamais fait, donc je ne peux pas t'aider.
En relisant toute la discussion on est tous partis sur une mauvaise piste en voulant te faire recharger la page via javascript car a part le lien vers le tutoriel, tu n'indiquait nulle part ton utilisation d'ajax.
L'exemple que je te donnais était plus simple mais aussi moins perfectionné...

J'ai bien fait de mettre les choses à plat dans ce cas au moins on sait de quoi on parle.
Cela dit, moi j'suis prêt à la faire en javascript ça ne me pose pas de soucis, en faisant une recherche je suis tombé sur cette solution en ajax et ne semblant pas être loin de la réussite je souhaitais approfondir mais vu le temps qu'on y a passé, une solution plus simple en javascript, même reprise du début, serait appréciable !

Si tu as un tuyau j'suis preneur

**12monkeys** · 03/06/2011, 12h50

Si tu suis mon exemple tu peux toujours par après tenter de comprendre ce qui ne fonctionne pas dans ton script ajax (sur le forum approprié

)

Mon idée je l'ai développée dans mon précédent message : http://www.developpez.net/forums/d10...s/#post6031306.

Je pense que pour réussir il faut procéder par étapes pour ne pas se disperser.

Alors, premièrement arrives tu à ce que la page se recharge dans le 1er select ?

**NoSmoking** · 03/06/2011, 15h05

reprenons effectivement les choses depuis le début, ou presque...je pars du postulat que ton premier choix fonctionne, d'après ce que je viens de relire.

D'ABORD les TABLEs
- TABLE auteur -> visiblement pas de problème
- TABLE livre -> il manque le champ de la page que tu veux afficher lors de la sélection
cela pourrait être un truc du style

Code sql :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
CREATE TABLE IF NOT EXISTS `livre` (
  `id` tinyint(4) NOT NULL AUTO_INCREMENT,
  `titre` varchar(50) collate latin1_general_ci NOT NULL,
  `page`  varchar(50) collate latin1_general_ci NOT NULL,
  `idAuteur` tinyint(4) DEFAULT NULL,
  PRIMARY KEY  (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 COLLATE=latin1_general_ci AUTO_INCREMENT=12 ;
--
-- Contenu de la table `livre`
--
INSERT INTO `livre` (`id`, `titre`, `idAuteur`) VALUES
(1, 'Odyssee', 'page_1', 1),
(2, 'Sahara',  'page_2', 1),
(3, 'Dragon',  'page_3', 1),
-- ...etc... le nom des pages est moyen je te l'accorde

maintenant lorsque tu vas faire la requête, dans ajaxLivre.php, il te faut récupérer et mettre dans la value des OPTIONs le nom de la page
on aura donc

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
<?php
  // MODIF  echo "<select name='livre'>";
  // ajout fonction sur le onchange
  echo "<select name='livre' onchange='gotonewpage(this)'>";
  if(isset($_POST["idAuteur"])){
    mysql_connect("localhost","root","root");
    mysql_select_db("test");
    $res = mysql_query("SELECT page, titre FROM livre 
      WHERE idAuteur=".$_POST["idAuteur"]." ORDER BY titre");
      while($row = mysql_fetch_assoc($res)){
        // MODIF echo "<option value='".$row["id"]."'>".$row["titre"]."</option>";
        // modif. recuperation de la page et pas de l'id
        echo "<option value='".$row["page"].".html'>".$row["titre"]."</option>";
      }
  }
  echo "</select>";
?>

les modifications sont signalées inline.

MAINTENANT il te faut gérer le onchange du SELECT livre et pour ce faire il te faut mettre la fonction gonewpage dans la partie SCRIPT de la page auteurs.php, puisque c'est dernière que tu modifies, enfin une partie seulement...
voila ce que tu devrais trouver entre les balises SCRIPT

Code javascript :

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
//------------------------------
// creation objet XMLHttpRequest
//------------------------------
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 onchange du SELECT auteur
//----------------------------------------------------------
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);
}
//----------------------------------------
// appelle sur le onchange du SELECT LIVRE
//----------------------------------------
function gotonewpage(what){
  var page = what.options[what.selectedIndex].value;
  if( page == "") return;
  window.location.href = page;
}

voila déjà pour une reprise

si cela te prend le chou n'hésites pas à le dire....

Ajouter des liens à des listes déroulantes liées

Discussions similaires

Partager

Partager