[AJAX] Adaptation de script Ajax

**Bhaalrock** · 07/08/2013, 10h04

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>";
?>

**andry.aime** · 07/08/2013, 10h23

Bonjour,

while($row = mysql_fetch_assoc($res)){
echo "<button name='id_matiere' id='id_matiere' value='".$row["id_matiere"]."'>".$row["nom_matiere"]."</button>";
}

Tu as le même id pour tous les boutons, un id doit être unique.

A+.

**Bhaalrock** · 07/08/2013, 10h38

Merci,
Oui c'est logique maintenant que tu m'as mis le nez dedans.
Donc faire plutôt quelque chose comme ça?

Code php :

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

echo "<button name='id_matiere' id='".$row["id_matiere"]."' value='".$row["id_matiere"]."'>".$row["nom_matiere"]."</button>";

et pour le script Ajax

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
/**
			* 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("'".$row["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);
			}

Je ne suis pas sûr de mes guillemets pour le ("'".$row["id_matiere"]."'")
Le debugeur de chrome me dit à cette ligne : Uncaught SyntaxError: Unexpected string

Edit: A part faire une requête par bouton, je ne vois pas trop comment faire pour l'instant.

**andry.aime** · 07/08/2013, 11h48

Tu ne dois pas mélanger PHP et javascript. Passe la valeur en paramètre de la fonction. Et tu n'as pas besoin de encodeURIComponent.

A+.

**Bhaalrock** · 07/08/2013, 11h57

Ok, merci
Passer la valeur en paramètre de la fonction, je ne te suis pas vraiment, tu peux me montrer un exemple?
Ok pour encodeURIComponent

Invité · 07/08/2013, 12h04

Bonjour,

Code :

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

			function go(id_matiere){

et :

Code :

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

<button ... onclick="go(this.value);">...

[AJAX] Adaptation de script Ajax

AJAX

Vue hybride

Discussions similaires

Partager

Partager