[AJAX] Adaptation de script Ajax
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:
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:
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:
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>";
?> |
