Discussion :

[andry.aime]

Tu dois aussi lire un tutoriel javascript, qui est le base d'AJAX.

A+.

[Invité]

Comme tu n'as pas d'id pour tes boutons, ni d'idées (!) qui te donne des boutons (!!), on va ruser...

1/ On va créer 3 champs cachées dans le formulaire :

Code :

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

1
2
3
	<input type="hidden" id="choix_id_famille" value="" />
	<input type="hidden" id="choix_id_matiere" value="" />
	<input type="hidden" id="choix_id_tc_simple" value="" />

2/ Fonction qui va remplir la value d'un input sur le clic du bouton :

Code :

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

1
2
3
4
5
6
7
8
<script>
function fill_input_cache(id, val){
	document.getElementById(id).value = val;
	alert(id + ' -> ' + val); // pour TEST !
	// on lance la fonction goOutils()
	goOutils();
}
</script>

?.php (choix 1) :

Code :

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

1
2
3
4
<?php
                                echo "<button onclick='goMateriaux(this.value); goCharacter(this.value); fill_input_cache(\'choix_id_famille\', this.value);' value='".$donnees["id_famille"]."'>".$donnees['diametre_outil']." </button>";
                                $var = $donnees["id_famille"];
?>

ajaxMateriaux.php (choix 2) :

Code :

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

1
2
3
<?php
                                echo "<button onclick='fill_input_cache(\'choix_id_matiere\', this.value);' value='".$donnees["id_matiere"]."'><img src=".$donnees["repere_matiere"]." ".$donnees["info_matiere"]."<br/> ".$donnees["nom_matiere"]."</button>";
?>

ajaxCharacter.php (choix 3) :

Code :

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

1
2
3
<?php
                                echo "<button onclick='fill_input_cache(\'choix_id_tc_simple\', this.value);' value='".$donnees["id_tc_simple"]."'>".$donnees["taille_caract_simple"]."</button>";
?>

POUR VERIFIER, on NE va mettre QUE ceci dans goOutils() :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
<script>
			function goOutils(){ 
				// On récupère ici les value des INPUT CACHES
				var id_famille = document.getElementById('choix_id_famille').value;
				var id_matiere = document.getElementById('choix_id_matiere').value;
				var id_tc_simple = document.getElementById('choix_id_tc_simple').value;
				alert('id_famille = ' + id_famille + ', id_matiere = ' + id_matiere + ', id_tc_simple = ' + id_tc_simple);
				// SI tu récupères bien tes choix, tu peux alors ajouter le script AJAX.
				// Il faudra sans doute TESTER si les 3 valeurs sont bien remplies
			}
</script>

[Bhaalrock]

Ok, merci, effectivement, voilà quelque chose de très bête (même pour ma part)
Tu m'as rapproché de la solution.

J'ai ajouté des name et id a chacun de mes boutons. (choix1, choix2, choix3) et j'ai changer les valeurs de mon scripts :

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
function goOutils(){ 
				var xhr = getXhr();
				var id_famille = document.getElementById('choix1').value;
				var id_matiere = document.getElementById('choix2').value;
				var id_tc_simple = document.getElementById('choix3').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');
				// Envoyer
				xhr.send("id_famille="+id_famille+"&id_matiere="+id_matiere+"&id_tc_simple="+id_tc_simple);
			}

J'ai placé mon onclick='goOutils()' dans le button de mon choix3 (id_tc_simple), comme c'est le dernier choix
J'obtiens 3 valeurs (une valeur pour chacune de mes id), mais elles ne me rendent que id=1 (pour les 3 variables), peut importe le bouton cliqué.
J'ai donc dorénavant un résultat pour ma requête finale (ma page ajaxOutils.php s'affiche, mais je n’obtiens donc que le résultat de mes 3 choix à id=1

Voilà ce que me donne mes tests pour voir si les variables passent
ajaxOutils.php :

Code php :

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

1
2
3
4
5
<?php
	echo "<p name='outils'>";
	echo "lid famille choisi est ".$_POST["id_famille"]." !!!<br/>"; // me donne : id famille choisi est 1
	echo "lid matiere choisi est ".$_POST["id_matiere"]." !!!<br/>"; // me donne : id matiere choisi est 1
	echo "lid character choisi est ".$_POST["id_tc_simple"]." !!!";  // me donne : id character choisi est 1

J'ai déjà un résultat!

Je viens de voir ton dernier post (en écrivant celui-ci), j'ai essayé également, mais la page de mon choix 2 ne s'affiche plus, j'essaie de trouver pourquoi.

[andry.aime]

Peut-on voir le code html généré actuel de la page?

A+.

[Bhaalrock]

ok,

index.php : (choix1)

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
<?php
// Déclaration des paramètres de connexion
 
$host = "localhost";
$user = "root";
$bdd = "projet";
$passwd = "";
 
 // On se connecte à MySQL
			mysql_connect($host, $user, $passwd) or die ("erreur de connexion au serveur");
			mysql_select_db($bdd) or die ("erreur de connexion à la base de données");
 
	 // On récupère tout le contenu de la table famille_outils
$req = mysql_query("SELECT DISTINCT *
					FROM famille_outils
					");
 
					// Je recupère toutes les colonnes de la table famille_outils
 
// On affiche chaque entrée une à une (boucle while)
while($donnees = mysql_fetch_assoc($req))
{
?> 
 
		<ul class="thumbnails">		
			<li class="span4">
			<div class="thumbnail"><img src="<?php echo $donnees['image_famille'];?>"><?php echo $donnees['famille_outil'];?><br/><br/>
			<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
<?php
				echo "<button name='choix1' id='choix1' onclick='goMateriaux(this.value); goCharacter(this.value)' value='".$donnees["id_famille"]."'>".$donnees['diametre_outil']." </button>";
?>			
			</a>
			</div>
			</li>
 
<?php 
}
?>

ajaxMateriaux.php : (choix2)

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
<?php
	echo "<p name='materiaux'>";
	if(isset($_POST["id_famille"])){
	// Déclaration des paramètres de connexion
 
$host = "localhost";
$user = "root";
$bdd = "projet";
$passwd = "";
 
 // On se connecte à MySQL
			mysql_connect($host, $user, $passwd) or die ("erreur de connexion au serveur");
			mysql_select_db($bdd) or die ("erreur de connexion à la base de données");
 
	 // On récupère tout le contenu de la table materiaux
$req = mysql_query("SELECT materiaux.*
					FROM materiaux, famille_outils, jointure_famille_materiaux
					WHERE materiaux.id_matiere = jointure_famille_materiaux.id_matiere
					AND famille_outils.id_famille = jointure_famille_materiaux.id_famille
					AND famille_outils.id_famille = ".$_POST["id_famille"]." ");
 
		while($donnees = mysql_fetch_assoc($req))
		{
?> 
 
			<li class="span3">
			<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseThree">
				<?php
				echo "<button name='choix2' id='choix2' value='".$donnees["id_matiere"]."'><img src=".$donnees["repere_matiere"]." ".$donnees["info_matiere"]."<br/> ".$donnees["nom_matiere"]."</button>";
				?>
				<input type="hidden" id="choix_id_matiere" value="" />
			</a>
			</li>
 
<?php 
		}
	}
	echo "</p>";
?>

ajaxCharacter.php : (choix3)

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
 <?php
	echo "<p name='character'>";
	if(isset($_POST["id_famille"]))
	{
	if($_POST["id_famille"] <= 4)   // Condition (si l'id famille choisi est inférieur ou égal à 4, alors)
	{
?>
		<h5>Character simple-line</h5>
<?php
	// Déclaration des paramètres de connexion
$host = "localhost";
$user = "root";
$bdd = "projet";
$passwd = "";
 
 // On se connecte à MySQL
			mysql_connect($host, $user, $passwd) or die ("erreur de connexion au serveur");
			mysql_select_db($bdd) or die ("erreur de connexion à la base de données"); 
 
	 // On récupère tout le contenu de la table taille_caracteres_simple
$req = mysql_query("SELECT *
					FROM taille_caracteres_simple
					WHERE taille_caract_simple
					");
 
					// Je recupère toutes les tailles de caractères simple
 
// On affiche chaque entrée une à une (boucle while)
 
		while($donnees = mysql_fetch_assoc($req))
		{
?> 
		<ul class="thumbnails">		
			<li class="span3">
			<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseResult">
				<div class="thumbnail">
				<?php
				echo "<button name='choix3' id='choix3' onclick='goOutils()' value='".$donnees["id_tc_simple"]."'>".$donnees["taille_caract_simple"]."</button>";
				?>
				<input type="hidden" id="choix_id_tc_simple" value="" />
				</div>
			</a>
			</li>
 
<?php 
		} // Fermeture du while
?> 
		</ul>

La page ajaxOutils.php n'a pas changée.

J'ai toujours l'id=1 des 3 variables, je pense que je dois maintenant trouver un moyen des les récupérer après le choix au lieu que ce soit la première id récupérée par défaut.
Si je comprend bien je cherche la page au onclick au moment de mon troisième choix, mais je n'envoies aucunes valeurs, donc c'est la valeur = 1 par défaut qui est prise du boutton.
J'essaie de faire fonctionner le code de jreaux62 parallèlement.

[andry.aime]

J'ai demandé le code HTML généré, ce qui se trouve dans ton navigateur, mais pas ton code PHP. En générant les boutons dans des boucles, tu auras des id qui se répètent. Un id doit être unique dans un document. Et pourquoi utiliser des plusieurs bouton au lieu d'un select par exemple ou des input radio?

A+.

[Bhaalrock]

Je n'ai pas l'autorisation d’héberger ma page :/
Voilà un screen de ce que cela me donner après avoir fait mes 3 choix en ci_joint.
Je n'ai pas utilisé de input, ni de bouton radio la présentation ne donnait pas ce qu'on m'a demandé de faire visuellement et/ou ça ne fonctionnait pas aussi bien qu'avec les balises button

[andry.aime]

Fait comme ce qu'a dit jreaux62, utilise des input hidden pour mettre les valeurs des boutons cliqués.

A+.

[Bhaalrock]

Ok, ses input hidden, je les places n'importe où dans ma page index.php, entouré de balise <form></form>?
Le fill_input_cache de :

Code php :

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

echo "<button onclick='goMateriaux(this.value); goCharacter(this.value); fill_input_cache(\'choix_id_famille\', this.value);' value='".$donnees["id_famille"]."'>".$donnees['diametre_outil']." </button>";

bloque l'ouverture de ma page ajaxMateriaux.php

[andry.aime]

Tu les mets dans le body.

Code php :

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

echo '<button onclick="goMateriaux(this.value); goCharacter(this.value); fill_input_cache(\'choix_id_famille\', this.value);" value="'.$donnees["id_famille"].'">'.$donnees['diametre_outil'].' </button>';

[andry.aime]

Ou tu devais simplement remplacer les singles quotes qui entourent les paramètres javascript par des doubles quotes.

Code php :

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

echo "<button onclick='goMateriaux(this.value); goCharacter(this.value); fill_input_cache(\"choix_id_famille\", this.value);' value='".$donnees["id_famille"]."'>".$donnees['diametre_outil']." </button>";

[Bhaalrock]

pffiiiouuuuu ! Merci à vous deux, ça fonctionne parfaitement !
C'était bien un problème de quotes.
J'ai fait différents test ! les id sont bien les bonnes choisies.
J'ai des erreur de logique dans les résultats, mais je me suis vite rendu compte qu'il s'agit d'erreurs dans la base de données!

Encore merci à vous et désolé d'avoir usé votre patience (je ne suis pas un cas facile).
J'aurais plus de temps pour moi en septembre et je vous promet de plancher sur le javascript afin de me perfectionner et d'avoir une meilleure logique du script.

Edit: je dirais même avoir une logique tout court