Bonjour,

Je suis débutant en Javascript.
J'ai suivis le tuto des listes liées en Ajax : http://siddh.developpez.com/articles/ajax/#LIV-A

Mon problème c'est que je ne veux pas qu'il soit sous forme de listes liées.
J'ai essayé de réadapter mon code où j'ai un choix de plusieurs boutons (importés de ma base de données) et en cliquant sur l'un d'eux, j'ai une liste de résultats qui apparaît selon le bouton choisi (ma seconde page.php avec une seconde requête).
j'ai déjà modifié le script pour avoir un résultat avec les boutons mais quand je clic sur un bouton, une série de résultats apparaît mais elle ne correspond qu'aux résultat du premier bouton (id=1) peut importe le bouton cliqué, je n'aurais que les résultats du premier bouton.
Je pense que je dois modifier le script Ajax? Mais comment?

Merci de votre aide.

edit: Par rapport au tuto, j'ai ajouter la ligne 25

ajax.js
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
                               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();
				// Récupération de l'id
				var id_matiere = encodeURIComponent(document.getElementById("id_matiere").value);
				// 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('outils').innerHTML = leselect;
					}
				}
 
				// Ici on va voir comment faire du post
				xhr.open("POST","ajaxOutils.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('materiaux');
				//id_matiere = sel.options[sel.selectedIndex].value;
				xhr.send("id_matiere="+id_matiere);
			}


index.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
<html>
	<head>
		<title>Tutoriel Ajax (XHTML + JavaScript + XML)</title>
</head>
	<body>
 
			<fieldset style="width: 500px">
				<legend>Liste liées</legend>
				<label>Materiaux</label>
				<div name='materiaux' id='materiaux' onclick='go()'>
 
					<?php
						mysql_connect("localhost","root","");
						mysql_select_db("projet");
						$res = mysql_query("SELECT *
											FROM materiaux
											WHERE id_matiere < 7
											");
						while($row = mysql_fetch_assoc($res)){
							echo "<button name='id_matiere' id='id_matiere' value='".$row["id_matiere"]."'>".$row["nom_matiere"]."</button>";
						}
					?>
				</div>
 
			</fieldset>
 
		<label>Outils</label>
				<div id='outils' style='display:inline'>
				<p name='outils'>
				</p>
				</div>
	</body>
</html>

ajaxOutils.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
<?php
	echo "<p name='outils'>";
	if(isset($_POST["id_matiere"])){
	echo "lid de la matiere choisie est ".$_POST["id_matiere"]." !!!";
		mysql_connect("localhost","root","");
		mysql_select_db("projet");
		$res = mysql_query("SELECT outils.*
							FROM materiaux, outils, jointure_materiaux
							WHERE materiaux.id_matiere = jointure_materiaux.id_matiere
							AND outils.id_outil = jointure_materiaux.id_outil
							AND materiaux.id_matiere = ".$_POST["id_matiere"]." ");
		while($row = mysql_fetch_assoc($res)){
?>
<p>
     <strong>Outil Référence</strong> : <?php echo $row['reference_outil']; ?><br />
    La famille de cet outil est : <?php echo $row['famille_outil']; ?>, et son diamètre est de <?php echo $row['diametre_outil']; ?> . <br />
    Sa forme est <?php echo $row['forme_outil']; ?> et sa matière est en <?php echo $row['matiere_outil']; ?> . <br />
    Pour finir, sa taille de troncature est de <?php echo $row['taille_troncature_outil']; ?><br />
</p>
 
<?php
		}
	}
	echo "</p>";
?>