[AJAX] Plusieurs variables sql dans une fonction Ajax

Version imprimable

Voir 40 message(s) de cette discussion en une page

Bonjour,

Je m'explique, j'aimerais introduire plusieurs variables sql dans une fonction Ajax.
J'ai ce script avec un id_famille

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function goOutils(id_famille){
	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('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);
}

J'aimerais qu'il y ai également deux autres id qui viennent d'autres requêtes (id_matiere et id_tc_simple) pour avoir un appel de base de données du genre :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
if(isset($_POST["id_famille"]) && isset($_POST['id_matiere']) && isset($_POST['id_tc_simple'])){
 
// Requête finale (devant comporter les trois variables sélectionnées précédemment) 
$reponse = mysql_query("SELECT outils.*, famille_outils.image_famille
	FROM outils, famille_outils, materiaux, jointure_materiaux, jointure_caracteres, taille_caracteres_simple, taille_caracteres_multi
	WHERE famille_outils.diametre_outil = outils.diametre_outil
	AND famille_outils.famille_outil = outils.famille_outil
	AND outils.id_outil = jointure_materiaux.id_outil 
	AND materiaux.id_matiere = jointure_materiaux.id_matiere
	AND outils.id_outil = jointure_caracteres.id_outil
	AND taille_caracteres_simple.id_tc_simple = jointure_caracteres.id_tc_simple
	AND taille_caracteres_multi.id_tc_multi = jointure_caracteres.id_tc_multi
	AND famille_outils.id_famille = ".$_POST["id_famille"]."
	AND materiaux.id_matiere = ".$_POST["id_matiere"]."
	AND taille_caracteres_simple.id_tc_simple = ".$_POST["id_tc_simple"]."
");						
 
// On affiche chaque resultats
while($donnees = mysql_fetch_assoc($reponse))
{

Comment faire pour mettre les 3 id dans la fonction Ajax?
Où placer le

Code:

onclick='goOutils(this.value)'

?

Merci de votre aide

08/08/2013, 15h26
Bovino
Question assez compliquée... Mettre trois paramètres dans l'appel d'une fonction puis dans des paramètres d'URL, ça va chercher loin...
Code:

1 2 3 4 function goOutils(id_famille, param2, param3){ ... xhr.send("id_famille="+id_famille+'&param2='+param2+'&param3='+param3); }
08/08/2013, 15h51
Bhaalrock

Bonjour,
Merci pour la réponse.

J'ai déjà essayé ça et ça ne fonctionne pas.
Donc tu me certifie cette façon de faire alors le problème vient d’ailleurs.

Peut être le onclick='goOutils(this.value)'
Je dois le placer sur la dernière de mes 3 requêtes qui donne ma requête finale?
Où c'est ma requête php qui ne s'écrit pas comme ça?

Partant du principe que mon "param2" et mon "param3" sont appelés par deux autres fonctions Ajax dépendants de mon "param1". (Au même titre que des listes liées)
08/08/2013, 16h16
Bovino

Euh... j'ai un peu peur de comprendre là...
Tu veux que trois requêtes différentes pointent vers un même script qui saura récupérer et traiter les trois valeurs ?
Si c'est ça, ne cherche pas plus loin : c'est impossible !

Arf, comment faire différemment alors?

En gros mon "param1" modifie ce que mon "param2" et mon "param3" me propose.

Ensuite quand mes 3 paramètres sont choisis, j'ai une requête qui doit prendre en compte ses 3 paramètres pour me donner un résultat précis.

param1 + param2 + param3 = dernière requête qui donne une réponse précise.
Je pensais pouvoir le faire avec une fonction Ajax, comme je l'ai fait avec les autres paramètres.

Une idée pour une autre solution?
3 fonctions Ajax différentes qui pointent vers la même page.php?

Voici comme je l'imaginais :

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
<?php
	echo "<p name='outils'>";
	if(isset($_POST["id_famille"]) && isset($_POST['id_matiere']) && isset($_POST['id_tc_simple'])){
 
	// 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");
 
// Requête finale (devant comporter les trois variables sélectionnées précédemment) 
$reponse = mysql_query("SELECT outils.*
			FROM outils, famille_outils, materiaux, jointure_materiaux, jointure_caracteres, taille_caracteres_simple, taille_caracteres_multi
			WHERE famille_outils.diametre_outil = outils.diametre_outil
			AND famille_outils.famille_outil = outils.famille_outil
			AND outils.id_outil = jointure_materiaux.id_outil 
			AND materiaux.id_matiere = jointure_materiaux.id_matiere
			AND outils.id_outil = jointure_caracteres.id_outil
			AND taille_caracteres_simple.id_tc_simple = jointure_caracteres.id_tc_simple
			AND taille_caracteres_multi.id_tc_multi = jointure_caracteres.id_tc_multi
			AND famille_outils.id_famille = ".$_POST["id_famille"]."
			AND materiaux.id_matiere = ".$_POST["id_matiere"]."
			AND taille_caracteres_simple.id_tc_simple = ".$_POST["id_tc_simple"]."
			");						
 
// On affiche chaque resultats
		while($donnees = mysql_fetch_assoc($reponse))
		{
?>
 
Référence de l'outil trouvé : <?php echo $donnees['reference_outil']; ?><br/>
Sa forme est : <?php echo $donnees['forme_outil']; ?><br/>
Etc....
 
<?php 
		}
	}
	echo "</p>";
?>

Bonjour,
en fait, c'est possible.
Encore faut-il que tu nous montres autre chose que des bouts de code éparpillés.

Une vision globale serait bienvenue.

Principe :
Code:

1 2 3 4 5 6 7 8 function goOutils(){ var id_famille = document.getElementById('id_param1').value; var param2 = document.getElementById('id_param2').value; var param3 = document.getElementById('id_param3').value; ... xhr.send("id_famille="+id_famille+'&param2='+param2+'&param3='+param3); ... }
Et sur <input> :

Code:

<input type="..." name="..." id="id_param1" onchange="goOutils();" />

ou <select> :

Code:

<select name="..." id="id_param1" onchange="goOutils();" />

N.B. onchange semble plus approprié que onclick.

Bonjour,
et merci pour la réponse.
J'utilise le onclick car mes variables se sélectionnent sous forme de bouton et non pas en liste liées. Je n'ai donc pas de balises <select>, <option> ou <input> mais des balises <button>.
Si je crois avoir bien compris le onchange n'est que pour les formulaire.
J'ai testé ta méthode, mais cela ne fonctionne pas.
Et en fait je m'inspire des tuto de Ajax en liste liées, comme celui fait sur ce site : http://siddh.developpez.com/articles/ajax/#LIV-A
Et je le réadapte avec des <button>.
Je ne sais pas sur quel <button> mettre mon onclick.
Mon ultime problème est de le faire avec 3 variables choisies précédemment.

Voici tout mon code épuré de ma mise en page.

myjs.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
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
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
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 au choix 1 (modifie le contenu du choix 2)
			*/
			function goMateriaux(id_famille){
				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('materiaux').innerHTML = leselect;
					}
				}
 
				// Ici on va voir comment faire du post
				xhr.open("POST","ajaxMateriaux.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);
			}
 
 
 
			/**
			* Méthode qui sera appelée sur le click du bouton au choix 1 (Modifie le contenu du choix 3)
			*/
			function goCharacter(id_famille){
				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('character').innerHTML = leselect;
					}
				}
 
				// Ici on va voir comment faire du post
				xhr.open("POST","ajaxCharacter.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);
			}
 
 
			/**
			* Méthode qui sera appelée sur le click du bouton au choix ??? (Requête finale)
			*/
			function goOutils(id_famille, id_matiere, id_tc_simple){  /** Methode de Bovino */
				var xhr = getXhr();
				var id_famille = document.getElementById('id_famille').value;  /** Methode de jreux62 */
				var id_matiere = document.getElementById('id_matiere').value;
				var id_tc_simple = document.getElementById('id_tc_simple').value;  /** J'en utiliste bien sur q'une des deux */
				// 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);
			}

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
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
<!DOCTYPE html>
 
<html>
<head>
	<title>Cutters rules</title>
	<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />	
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">
	<link href="css/bootstrap-responsive.min.css" rel="stylesheet" type="text/css">
	<link href="css/cutters_rules_css.css" rel="stylesheet" type="text/css">
	<link href="css/cutters_rules_print.css" media="print" rel="stylesheet" type="text/css">
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" type="text/javascript"></script>
	<script src="js/jquery.js" type="text/javascript"></script>
	<script src="js/myjs.js" type="text/javascript"></script>
	<script src="js/bootstrap.min.js" type="text/javascript"></script>
 
</head>
<body>
 
	<header>
		<div class="container-fluid">
			<div class="row-fluid">
				<div class="span6 offset3"><img src="images/header2.png" alt="header" id="header"/></div>
			</div>
		</div>
	</header>
 
		<!-- Il y a 3 choix à prendre pour l'utilisateur, il n'a accès au choix suivant uniquement quand il à répondu au choix précédent -->
 
		<!-- Premier choix -->
 
<?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))
{
 
echo "<button onclick='goMateriaux(this.value);goCharacter(this.value);goOutils(this.value)' value='".$donnees["id_famille"]."'>".$donnees['diametre_outil']." </button>";
 
}
?>
 
		<!-- Second choix : ajaxMateriaux.php -->
 
<div name='materiaux' id='materiaux' style='display:inline'></div>
 
 
		<!-- Troisieme choix : ajaxCharacter.php -->
 
<div name='character' id='character' style='display:inline'></div>	
 
 
		<!-- Résultat final : ajaxOutils.php -->
 
<div name='outils' id='outils' style='display:inline'></div>	
 
 
</body>
</html>

ajaxMateriaux.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
34
35
36
37
38
<?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 value='".$donnees["id_matiere"]."'><img src=".$donnees["repere_matiere"]." ".$donnees["info_matiere"]."<br/> ".$donnees["nom_matiere"]."</button>";
				?>
			</a>
			</li>
 
<?php 
		}
	}
	echo "</p>";
?>

ajaxCharacter.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
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
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
 <?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 value='".$donnees["id_tc_simple"]."'>".$donnees["taille_caract_simple"]."</button>";
				?>
				</div>
			</a>
			</li>
 
<?php 
		} // Fermeture du while
?> 
		</ul>
 
 
		<h5>Character multi-line</h5>
<?php  
	 // On récupère tout le contenu de la table taille_caracteres_multi
$req = mysql_query("SELECT *
			FROM taille_caracteres_multi
			WHERE taille_caract_multi
			");
 
						// Je recupère toutes les tailles de caractères multi
 
// 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 $donnees['taille_caract_multi'];?></div>
			</a>
			</li>
 
<?php 
		} // Fermeture du while
?>
 
		</ul>
<?php		
	}  // Fermeture de if($_POST["id_famille <= 4"]) 
 
	else // Condition (sinon id >= 5)
	{
?>		
		<h5>Lips</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_multi
$req = mysql_query("SELECT DISTINCT nb_levres
			FROM outils
			WHERE nb_levres
			");
 
						// Je recupère tous les types de nb_levres de la table outils
 
// 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 $donnees['nb_levres'];?></div>
			</a>
			</li>	
<?php 
		} // Fermeture du while
	}  // Fermeture de else
} // Fermeture de if(isset($_POST["id_famille"]))
	echo "</p>";
?>

Et le dernier qui ne fonctionne pas (rappel j'ai placé le onclick="ajaxOutils" sur la première requête). J'ai testé de la placer à différents endroits, mais rien ne s'affiche.

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
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
<?php
	echo "<p name='outils'>";
	if(isset($_POST["id_famille"]) && isset($_POST['id_matiere']) && isset($_POST['id_tc_simple'])){
 
	// 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");
 
// Requête finale (devant comporter les trois variables sélectionnées précédemment) 
$reponse = mysql_query("SELECT outils.*, famille_outils.image_famille
			FROM outils, famille_outils, materiaux, jointure_materiaux, jointure_caracteres, taille_caracteres_simple, taille_caracteres_multi
			WHERE famille_outils.diametre_outil = outils.diametre_outil
			AND famille_outils.famille_outil = outils.famille_outil
			AND outils.id_outil = jointure_materiaux.id_outil 
			AND materiaux.id_matiere = jointure_materiaux.id_matiere
			AND outils.id_outil = jointure_caracteres.id_outil
			AND taille_caracteres_simple.id_tc_simple = jointure_caracteres.id_tc_simple
			AND taille_caracteres_multi.id_tc_multi = jointure_caracteres.id_tc_multi
			AND famille_outils.id_famille = ".$_POST["id_famille"]."
			AND materiaux.id_matiere = ".$_POST["id_matiere"]."
			AND taille_caracteres_simple.id_tc_simple = ".$_POST["id_tc_simple"]."
			");						
 
// On affiche chaque resultats
		while($donnees = mysql_fetch_assoc($reponse))
		{
?>
 
 
 
 
				<!-- Voici le résultat présenté sous forme de descriptif de la référence d el'outil trouvé -->
		<div id="result">		
			<div class="row-fluid" id="results">
				<div class="span12"><p class="titre">Results: </p>
				<div class="span11" id="tool_result">
				<div class="span2">
				<img src="<?php echo $donnees['image_famille'];?>"></img>
				</div>
				<div class="span2">
				<h5><?php echo $donnees['famille_outil']; ?></h5> <br/>
				<p>Référence: <br/>
				<?php echo $donnees['reference_outil']; ?></p>
				</div>
				<div class="span4">
				<p>
				La famille de cet outil est : <?php echo $donnees['famille_outil']; ?> <br/>
				Caractéristiques : <br/>
				Diamètre: <?php echo $donnees['diametre_outil']; ?> <br/>
				Forme: <?php echo $donnees['forme_outil']; ?> <br/>
				Matière: <?php echo $donnees['matiere_outil']; ?> <br/>
				Taille troncature: <?php echo $donnees['taille_troncature_outil']; ?>
				</p></em>
				</div>
				<div class="span4">
				<p>
				Il est utilisé pour les caractères simple line de <?php echo $donnees['taille_caract_simple']; ?><br />
				et en caractères multi line de <?php echo $donnees['taille_caract_multi']; ?><br /></em>
 
				</p>
				</div>
				</div>
				</div>
			</div>
		</div>
<?php 
		}
	}
	echo "</p>";
?>

09/08/2013, 10h18
Invité

Bricoler du code n'a pas d'intérêt si tu ne maitrises pas la METHODOLOGIE.

Citation:

"Il faut savoir d'où on part et où on va pour savoir quel chemin emprunter."

- quel est l'objectif ?
- de quoi j'ai besoin ?
- comment les utiliser/récupérer/transmettre ?
- dans quel ordre (CHRONOLOGIE DES EVENEMENTS) ?
- avec quels moyens ?
- ...

Prends une feuille de papier (je sais, ça semble archaïque !), et écrit la METHODOLOGIE.
09/08/2013, 10h34
Bhaalrock

Ok, je l'ai fait. (en essayant d'être le plus juste possible)

- Je veux transmettre les 3 choix de l'utilisateur de index.php, ajaxMateriaux.php et ajaxCharacter.php à la requête de ajaxOutils.php.

-J'ai besoin des variables sélectionnées par l'utilisateur pour les transmettre à ma requête de la page ajaxOutils.php

-Pour les utiliser/ les récupérer/ les transmettre, j'utilise du script Ajax.

-Pour la chronologie:
Je transmet d'abord la variable index.php, puis celle de ajaxMateriaux.php, puis celle de ajaxCharacter.php, qui devront me permettre de faire fonctionner ma dernière requête.

Je me rends compte avec tout ça que je peux laisser ma requête finale dans la page index.php, mais je ne sais pas si ça change grand chose à mon problème.
09/08/2013, 11h16
Bhaalrock

Je pense que mon problème est de trouver comment récupérer les 3 valeurs.
Qu'elles soit toutes les 3 dans le balise du onclick='goOutils(this.value)'

Et là je ne vois pas comment faire, je continue de chercher.
Si quelqu'un à une idée de comment procédé.

ça ne doit pas être sorcier.
09/08/2013, 11h24
Invité

C'est un peu "léger"...

Voilà un extrait de chronologie/méthodologie :
1/ affichage de 3 boutons pour sélectionner les choix (comment ? -> <button...>)
2/ click sur bouton1 -> récupération de param1 (comment ? -> via Ajax)
3/ retour Ajax param1 -> changement des choix dans bouton2 et bouton3 (?) (à toi de savoir comment)
4/ click sur bouton2 -> récupération de param2 (comment ? -> via Ajax)
5/ click sur bouton3 -> récupération de param3 (comment ? -> via Ajax)
...
09/08/2013, 12h03
Bhaalrock
Oui effectivement, il y a plus de détail dans ta façon de faire.
Tout cela je pense l'avoir compris,
avec un

Code:

<button onclick='kkchose(this.value)' value='".$donnees["id_truc"]."'></button>

Je récupère l'id_truc, et la transmet par le script Ajax (function kkchose(id_truc) qui m’envoie la variable choisie par l'utilisateur (avec le valeur.send) à la page trucmuche.php. (configuré dans le script)

Du coup, vérification si il y a une variable id_truc de transmise à la page trucmuche.php avec un

Code:

if(isset($_POST["id_truc"]))

Si oui, on affiche le contenu de la page trucmuche.php et on peut mettre notre $_POST dans la requête sql.

Code:

WHERE id_truc = ".$_POST["id_truc"]."

J'ai tout bon jusque là?

Ce que je ne trouve pas c'est comment faire la même chose avec plusieurs variables venant de 3 pages php différentes. (ses pages sont à ce moment toutes chargées dans les div de la page index.php grâce à Ajax)

Code:

if(isset($_POST['id_truc']) && isset($_POST['id_machin']) && isset($_POST['id_bidule']))

et les mettre dans ma requête :
Code:

1 2 3 WHERE id_truc = ".$_POST["id_truc"]." AND id_machin = ".$_POST["id_machin"]." AND id_bidule = ".$_POST["id_bidule"]."

Ca se fait via JavaScript/Ajax.

Tu as 3 fonctions recup1(), recup2(), recup3().
Chacune récupère un paramètre paramX, et affiche une réponse Ajax dans un div.

Mais on peut aussi lancer une autre fonction :

Code:

1
2
3
4
5
6
7
8
9
10
function recup1(){
  // récup param
  // Ajax
    if(Reponse){
       // 1/ Affichage de la réponse dans un div
       document.......InneHtml = .....;
       // 2/ on lance la fonction
       goOutils();
    }
}

Code:

1
2
3
4
5
6
7
8
9
10
function goOutils(){
	on récupère les valeurs des boutons :
	var param1 = document.getElementById('id_param1').value;
	var param2 = document.getElementById('id_param2').value;
	var param3 = document.getElementById('id_param3').value;
	// TEST : si les 3 params sont remplis -> Ajax
	...
	xhr.send("param1="+param1+'&param2='+param2+'&param3='+param3);
	...
}

09/08/2013, 13h03
Bhaalrock
J'ai pourtant testé ta seconde méthode et celle là :
Code:

1 2 3 function goOutils(id_famille, id_matiere, id_tc_simple){ ... xhr.send("id_famille="+id_famille+"&id_matiere="+id_matiere+"&id_tc_simple"+id_tc_simple);
Mais rien ne fonctionne, ça vient peut être de mon onclick que j'ai mal placé...
J'utilise un onclick='goOutils(this.value)', mais du coup il ne va récupérer que la valeur du bouton auquel je l'ai associé :/
je devrais créer une div avec toutes les valeurs? du genre :
Code:

1 2 3 <?php "<div onclick='goOutils(this.value)' value='".$donnees["id_famille"]."'; '".$donnees["id_matiere"]."'; '".$donnees["id_tc_simple"]."'></div>"; ?>
Comme j'ai 3 bouton différents, comment placer ce onclick?

Citation:

Envoyé par Bhaalrock

..., comment placer ce onclick?

En comprenant ce que tu fais et comment ça fonctionne...
Ca t'éviterait de tout mélanger.
Code:

1 2 3 4 5 function goOutils(id_famille, id_matiere, id_tc_simple){ /** Methode de Bovino */ var xhr = getXhr(); var id_famille = document.getElementById('id_famille').value; /** Methode de jreux62 */ var id_matiere = document.getElementById('id_matiere').value; var id_tc_simple = document.getElementById('id_tc_simple').value; /** J'en utiliste bien sur q'une des deux */
Si tu passes tout ce qu'on te dit au mixer, tu ne récolteras que de la bouillie.

oui, merci
C'était pour l'exemple, j'ai essayé les 2 methodes, mais je ne les ai pas associé évidement. j'ai tester comme ça :
Code:

1 2 3 4 5 6 7 function goOutils(){ var xhr = getXhr(); var id_famille = document.getElementById('id_famille').value; var id_matiere = document.getElementById('id_matiere').value; var id_tc_simple = document.getElementById('id_tc_simple').value; ... xhr.send("id_famille="+id_famille+"&id_matiere="+id_matiere+"&id_tc_simple"+id_tc_simple);
et aussi comme ça :
Code:

1 2 3 4 function goOutils(id_famille, id_matiere, id_tc_simple){ var xhr = getXhr(); ... xhr.send("id_famille="+id_famille+"&id_matiere="+id_matiere+"&id_tc_simple"+id_tc_simple);
Je n'ai pas mélangé.
Mais aucune des 2 ne fonctionnent.
ou bien les 2 fonctionnent, mais mon appel de fonction n'est pas correctement placé.

09/08/2013, 14h14
Invité

Tiens-en toi à UNE seule méthode !
Et vas jusqu'au bout du raisonnement !
09/08/2013, 14h19
Bhaalrock

Ok, tu as raison.
Je vais continuer avec la méthode de Bovino, (que tu m'as toi même donnée dans une autre post) qui ne m'a pas posé d'erreurs avec une seule variable.
Donc en thérorie avec 50 variables ça devrait marcher aussi.
Je pense que c'est juste la récupération de ses variables qui me pose un souci.
Je vais devoir récupérer toute les value en même temps...

Je ne vois pas comment récupérer 3 variables de 3 pages différentes pour les assigner au onclick :/
Je ne fais du php que depuis peu
help plz

Edit :Ahhhh !
J'ai fait un test en plaçant en debut de ma page ajaxOutils.php
Code:

1 2 3 4 5 6 <?php echo "<p name='outils'>"; echo "lid famille choisi est ".$_POST["id_famille"]." !!!<br/>"; echo "lid matiere choisi est ".$_POST["id_matiere"]." !!!<br/>"; echo "lid character choisi est ".$_POST["id_tc_simple"]." !!!"; if(isset($_POST['id_famille']) && isset($_POST['id_matiere']) && isset($_POST['id_tc_simple']))
Comme ça même si rien ne s'affiche après les if(isset) comme les conditions ne sont pas remplient, j'aurais au moins ça.

Il me trouve l'id famille choisie par contre les 2 autres sont "Undefined"

J'ai testé de déplacé mon onclick dans le button qui contient la

Code:

value='".$donnees["id_tc_simple"]."'

Et il me retourne toujours une valeur sur mon echo ".$_POST["id_famille"]." mais c'est la valeur de l'id_tc_simple qui s'y affiche!
Je ne comprends pas trop pourquoi.

Si quelqu'un à éventuellement une autre méthode que Ajax pour cette requête, je suis preneur. (Je suis pris par le temps)

Je reviens à ce que tu m'as écris plus haut
Citation:
Envoyé par jreaux62
Ca se fait via JavaScript/Ajax.

Tu as 3 fonctions recup1(), recup2(), recup3().
Chacune récupère un paramètre paramX, et affiche une réponse Ajax dans un div.

Mais on peut aussi lancer une autre fonction :
Code:

1 2 3 4 5 6 7 8 9 10 function recup1(){ // récup param // Ajax if(Reponse){ // 1/ Affichage de la réponse dans un div document.......InneHtml = .....; // 2/ on lance la fonction goOutils(); } }
Code:

1 2 3 4 5 6 7 8 9 10 function goOutils(){ on récupère les valeurs des boutons : var param1 = document.getElementById('id_param1').value; var param2 = document.getElementById('id_param2').value; var param3 = document.getElementById('id_param3').value; // TEST : si les 3 params sont remplis -> Ajax ... xhr.send("param1="+param1+'&param2='+param2+'&param3='+param3); ... }
Si je comprends bien je dois faire 1 function par élément que je veux récupérer avec l'adresse de sa page ?
et ses 3 fonctions, je dois les faire converger vers ma fonction goOutils?

Tu pourrais me faire un exemple concret de cette méthode stp?

19/08/2013, 14h07
Invité
Citation:

Envoyé par Bhaalrock

up plz :(

:moinsser: Tu veux dire que depuis le 09/08/2013 :
- tu n'as rien essayé/testé ?!?
- tu n'as lu aucun tuto/cours/explication ?!
RIEN qui t'ait permis d'avancer, ne serait-ce qu'un peu ???? :koi:

Sinon, quel est(sont) ta(tes) dernière(s) tentative(s) ?

Bonjour,

J'ai eu une semaine de vacance.
J'étais en camping sans internet, donc non je n'ai pas avancé.
J'ai repris depuis ce matin, et effectivement ça ne fonctionne toujours pas.

je continue différents tests, mais je n'arrive qu'à récupérer la variable de mon id_famille.
Les deux autres sont indéfinie, pourtant j'ai bien placé un onclick=goOutils(this.value) sur les 3 pages différentes pour récupérer les 3 variables.
Voila mon script, je le pense bon:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 function goOutils(id_famille, id_matiere, id_tc_simple){ 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('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); }
l'id choisi est bien envoyée, mais elle est écrasée par le choix de l'id suivante.

Quand je fais ce test:
Code:

1 2 3 echo "lid famille choisi est ".$_POST["id_famille"]." !!!<br/>"; echo "lid matiere choisi est ".$_POST["id_matiere"]." !!!<br/>"; echo "lid character choisi est ".$_POST["id_tc_simple"]." !!!";
le chiffre de l'id choisi change à chaque clique au niveau de ma première ligne et les 2 suivantes sont undefined.

J'ai lu sur des forums qu'il faut envoyer les variables sous forme de tableau, mais je ne sais pas comment faire et je ne trouve pas de tutos ajax qui envoie plusieurs variables en une seule fonction.

Citation:

Envoyé par Bhaalrock

J'ai eu une semaine de vacance.
J'étais en camping sans internet, donc non je n'ai pas avancé.

OK ! Donc, tu veux nous faire bosser pendant que tu te prélasses en vacances !
Tu as de l'ambition pour ton futur boulot : être "le big boss" ! :mouarf:

Ton problème vient d'un mauvais choix : le choix de la méthode de Bovino, au lieu de la mienne.
Non pas que celle de Bovino soit mauvaise. Mais tu l'utilises mal !

Code:

function goOutils(id_famille, id_matiere, id_tc_simple){

Code:

...onclick="goOutils(this.value);"...

Tu ne vois pas le problème ?
La fonction demande 3 paramètres, et tu ne lui en fournis qu'un seul !

Tu devrais avoir les yeux reposés après ces vacances, non ? :lun:

Avec "ma" méthode :
Code:

1 2 3 4 5 6 7 8 9 10 function goOutils(){ // 1/ Récupération des 3 valeurs var id_famille = document.getElementById('id_param1').value; var param2 = document.getElementById('id_param2').value; var param3 = document.getElementById('id_param3').value; // 2/ AJAX ... xhr.send("id_famille="+id_famille+'&param2='+param2+'&param3='+param3); ... }
Et il suffit de :

Code:

...onclick="goOutils();"...

Ok, quand je test ta solution :

Code:

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('id_famille').value;
				var id_matiere = document.getElementById('id_matiere').value;
				var id_tc_simple = document.getElementById('id_tc_simple').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);
			}

la page ajaxOutils.php ne s'importe pas.

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
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
77
<?php
	echo "<p name='outils'>";
	echo "lid famille choisi est ".$_POST["id_famille"]." !!!<br/>"; // test id
	echo "lid matiere choisi est ".$_POST["id_matiere"]." !!!<br/>"; // test id
	echo "lid character choisi est ".$_POST["id_tc_simple"]." !!!";  // test id
	if(isset($_POST['id_famille']) && isset($_POST['id_matiere']) && isset($_POST['id_tc_simple']))
	{
 
	// 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");
 
// Requête finale (devant comporter les trois variables sélectionnées précédemment) 
$reponse = mysql_query("SELECT outils.*, famille_outils.image_famille
						FROM outils, famille_outils, materiaux, jointure_materiaux, jointure_caracteres, taille_caracteres_simple
						WHERE famille_outils.diametre_outil = outils.diametre_outil
						AND famille_outils.famille_outil = outils.famille_outil
						AND outils.id_outil = jointure_materiaux.id_outil 
						AND materiaux.id_matiere = jointure_materiaux.id_matiere
						AND outils.id_outil = jointure_caracteres.id_outil
						AND taille_caracteres_simple.id_tc_simple = jointure_caracteres.id_tc_simple
						AND famille_outils.id_famille = ".$_POST["id_famille"]."
						AND materiaux.id_matiere = ".$_POST["id_matiere"]."
						AND taille_caracteres_simple.id_tc_simple = ".$_POST["id_tc_simple"]."
						");						
 
// On affiche chaque resultats
		while($donnees = mysql_fetch_assoc($reponse))
		{
?>
 
 
				<!-- Voici le résultat présenté sous forme de descriptif de la référence d el'outil trouvé -->
		<div id="result">		
			<div class="row-fluid" id="results">
				<div class="span12"><p class="titre">Results: </p>
				<div class="span11" id="tool_result">
				<div class="span2">
				<img src="<?php echo $donnees['image_famille'];?>"></img>
				</div>
				<div class="span2">
				<h5><?php echo $donnees['famille_outil']; ?></h5> <br/>
				<p>Référence: <br/>
				<?php echo $donnees['reference_outil']; ?></p>
				</div>
				<div class="span4">
				<p>
				La famille de cet outil est : <?php echo $donnees['famille_outil']; ?> <br/>
				Caractéristiques : <br/>
				Diamètre: <?php echo $donnees['diametre_outil']; ?> <br/>
				Forme: <?php echo $donnees['forme_outil']; ?> <br/>
				Matière: <?php echo $donnees['matiere_outil']; ?> <br/>
				Taille troncature: <?php echo $donnees['taille_troncature_outil']; ?>
				</p></em>
				</div>
				<div class="span4">
				<p>
				Il est utilisé pour les caractères simple line de <?php echo $donnees['taille_caract_simple']; ?><br />
				et en caractères multi line de <?php echo $donnees['taille_caract_multi']; ?><br /></em>
 
				</p>
				</div>
				</div>
				</div>
			</div>
		</div>
<?php 
		}
	}
	echo "</p>";
?>

Je dois mal utiliser cette façon de faire également.
J'ai l'impression que la valeur de chaque variable écrase la précédente quand elle est cliquée.

Je place 3 onclick='goOutils()' différents sur 3 pages différentes, où ce trouve mes 3 valeurs, je ne dois peut être pas faire cela ?

Code:

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

Code:

echo "<button onclick='goOutils()' value='".$donnees["id_matiere"]."'><img src=".$donnees["repere_matiere"]." ".$donnees["info_matiere"]."<br/> ".$donnees["nom_matiere"]."</button>";

Code:

echo "<button onclick='goOutils()' value='".$donnees["id_tc_simple"]."'>".$donnees["taille_caract_simple"]."</button>"

ps : effectivement, je comprends maintenant le problème de (this.value), qui n'envoie qu'un seul élément à la fonction.
J'ai les yeux pleins de sable maintenant :mrgreen:

19/08/2013, 16h00
Bhaalrock

j'ai cette erreur dans la console chrome:
Uncaught TypeError: Cannot read property 'value' of null myjs.js:79
goOutils myjs.js:79

cette ligne 79 c'est :

Code:

var id_famille = document.getElementById('id_famille').value;
19/08/2013, 17h01
Invité

Quelles 3 pages différentes ??

Et pourquoi 3 boutons <button> ?
Comment pourraient-ils être sur des pages différentes ? :koi:

Je ne suis même pas persuadé que tu saches bien toi-même ce-qui-fait-quoi/quand/comment/pourquoi.

Il faudrait que tu nous ré-expliques CLAIREMENT le déroulement des actions...
+ qu'on ai une vision globale.

Ce serait plus simple (?) avec une page en ligne.
19/08/2013, 17h02
andry.aime

Bonsoir,

Citation:

Code:

xhr.send("id_famille="+id_famille+"&id_matiere="+id_matiere+"&id_tc_simple"+id_tc_simple);

Il te manque un "=" pour le dernier paramètre.
Peut-on voir ton code HTML généré de la page?

A+.

Bonjour,

Merci pour le = manquant.

Alors voila deux captures de ma page en pièce jointe. (en bas de post)
Quand je lance ma page, elle s'ouvre comme cela. (capture 4.jpg)
Je choisi un diamètre d'un outil (numéro 1). Quand le click est fait, cela m'ouvre le numéro 2 (capture5.jpg), je choisi ma matière. Quand le click est fait, cela ouvre le numero 3, choix de la hauteur de caractère.
Quand je click sur ce choix de hauteur de caractère, cela m'ouvre le dernier onglet (Your tool) qui doit récupérer les 3 variables choisies par l'utilisateur (numéro 1, 2 et 3). Cela me permet de placer ses 3 variables dans la requête de (Your tool = ajaxOutils.php) et permettre de trouver une référence d'outil précise.

Le choix numéro 2, numéro 3 et Your tool sont sur des pages différentes, appelés par la méthode Ajax.
Le choix numéro 1 influence ce qui sera affiché dans le choix numéro 2 et 3.

Ma page de script :

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
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
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
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 au choix 1 (modifie le contenu du choix 2)
			*/
			function goMateriaux(id_famille){
				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('materiaux').innerHTML = leselect;
					}
				}
 
				// Ici on va voir comment faire du post
				xhr.open("POST","ajaxMateriaux.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);
			}
 
 
 
			/**
			* Méthode qui sera appelée sur le click du bouton au choix 1 (Modifie le contenu du choix 3)
			*/
			function goCharacter(id_famille){
				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('character').innerHTML = leselect;
					}
				}
 
				// Ici on va voir comment faire du post
				xhr.open("POST","ajaxCharacter.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);
			}
 
 
			/**
			* Méthode qui sera appelée sur le click du bouton au choix ??? (Requête finale)
			*/
			function goOutils(){ 
				var xhr = getXhr();
				var id_famille = document.getElementById('id_famille').value;
				var id_matiere = document.getElementById('id_matiere').value;
				var id_tc_simple = document.getElementById('id_tc_simple').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);
			}

Ma page principal : index.php (les différents onclick sont à la ligne 74)
Mon goOutils() n'est pas bien placé?

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
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
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
<!DOCTYPE html>
 
<html>
<head>
	<title>Cutters rules</title>
	<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />	
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">
	<link href="css/bootstrap-responsive.min.css" rel="stylesheet" type="text/css">
	<link href="css/cutters_rules_css.css" rel="stylesheet" type="text/css">
	<link href="css/cutters_rules_print.css" media="print" rel="stylesheet" type="text/css">
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" type="text/javascript"></script>
	<script src="js/jquery.js" type="text/javascript"></script>
	<script src="js/myjs.js" type="text/javascript"></script>
	<script src="js/bootstrap.min.js" type="text/javascript"></script>
 
</head>
<body>
 
	<header>
		<div class="container-fluid">
			<div class="row-fluid">
				<div class="span6 offset3"><img src="images/header2.png" alt="header" id="header"/></div>
			</div>
		</div>
	</header>
 
		<div class="container-fluid" id="check">
			<div class="row-fluid">
				<div class="span6 offset3">
	<div class="accordion" id="accordion2">
  <div class="accordion-group">
    <div class="accordion-heading">
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2">
        <img src="images/1.png" alt="choice1" class="choice1">Check your cutter diameter</img>
      </a>
    </div>
    <div id="collapseOne" class="accordion-body collapse in">
      <div class="accordion-inner">
 
		<!-- Il y a 3 choix à prendre pour l'utilisateur, il n'a accès au choix suivant uniquement quand il à répondu au choix précédent -->
 
		<!-- Premier choix -->
 
<?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 onclick='goMateriaux(this.value); goCharacter(this.value); goOutils()' value='".$donnees["id_famille"]."'>".$donnees['diametre_outil']." </button>";
				$var = $donnees["id_famille"];
?>			
			</a>
			</div>
			</li>
 
<?php 
}
?>
		</ul>
      </div>
    </div>
  </div> 
 
  <div class="accordion-group">
    <div class="accordion-heading">
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2">
        <img src="images/2.png" alt="choice2" class="choice2">Check your material</img>
      </a>
    </div>
    <div id="collapseTwo" class="accordion-body collapse">
      <div class="accordion-inner">
 
		<!-- Second choix : appel le contenu de la page ajaxMateriaux.php -->
 
<div name='materiaux' id='materiaux' style='display:inline'></div>		
 
      </div>
    </div>
  </div>
 
  <div class="accordion" id="accordion2">
  <div class="accordion-group">
    <div class="accordion-heading">
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2">
        <img src="images/3.png" alt="choice3" class="choice3">Check your tools</img>
      </a>
    </div>
    <div id="collapseThree" class="accordion-body collapse">
      <div class="accordion-inner">
 
		<!-- Troisieme choix : appel le contenu de la page ajaxCharacter.php -->
 
<div name='character' id='character' style='display:inline'></div>	 
 
      </div>
    </div>
  </div>
</div>
</div>
</div>
</div>
</div>
 
	<!-- Résultat final : appel le contenu de la page ajaxOutils.php-->
 
	<div class="container-fluid">
			<div class="row-fluid">
				<div class="span6 offset3">
	<div class="accordion" id="accordion2">
  <div class="accordion-group">
    <div class="accordion-heading">
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2">
        Your tool
      </a>
    </div>
    <div id="collapseResult" class="accordion-body collapse">
      <div class="accordion-inner">
 
<div class="span3 offset9" id="new_selection"><a class="btn btn-medium" href="<?php echo($_SERVER['PHP_SELF']); ?>">Make a new selection</a></div>	  
 
 
		</div>
    </div>
  </div>
</div>
</div>
</div>
</div>
 
<div name='outils' id='outils' style='display:inline'></div>	
	<footer>
 
	</footer>
 
</body>
</html>

Ma page ajaxMateriaux.php (choix 2), qui donnera plus ou moins de choix de matière selon le premier choix

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
<?php
	echo "<p name='materiaux'>";
	if(isset($_POST["id_famille"])){
	echo "lid choisi est ".$_SESSION["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 value='".$donnees["id_matiere"]."'><img src=".$donnees["repere_matiere"]." ".$donnees["info_matiere"]."<br/> ".$donnees["nom_matiere"]."</button>";
				?>
			</a>
			</li>
 
<?php 
		}
	}
	echo "</p>";
?>

Ma page ajaxCharacter.php (choix 3), qui me donnera des possibilités de choix différentes selon le premier choix.

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
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
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
<?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 value='".$donnees["id_tc_simple"]."'>".$donnees["taille_caract_simple"]."</button>";
				?>
				</div>
			</a>
			</li>
 
<?php 
		} // Fermeture du while
?> 
		</ul>
 
 
		<h5>Character multi-line</h5>
<?php  
	 // On récupère tout le contenu de la table taille_caracteres_multi
$req = mysql_query("SELECT *
						FROM taille_caracteres_multi
						WHERE taille_caract_multi
						");
 
						// Je recupère toutes les tailles de caractères multi
 
// 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 $donnees['taille_caract_multi'];?></div>
			</a>
			</li>
 
<?php 
		} // Fermeture du while
?>
 
		</ul>
<?php		
	}  // Fermeture de if($_POST["id_famille <= 4"]) 
 
	else // Condition (sinon id >= 5)
	{
?>		
		<h5>Lips</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_multi
$req = mysql_query("SELECT DISTINCT nb_levres
						FROM outils
						WHERE nb_levres
						");
 
						// Je recupère tous les types de nb_levres de la table outils
 
// 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 $donnees['nb_levres'];?></div>
			</a>
			</li>	
<?php 
		} // Fermeture du while
	}  // Fermeture de else
} // Fermeture de if(isset($_POST["id_famille"]))
	echo "</p>";
?>

Ma page final : ajaxOutils.php = Your tool (c'est la que je bloque), qui doit me récupérer mes 3 variables. (qui sont donc sur des pages différentes).
Rien ne s'affiche et mes tests en début de page m'indique "undefined"

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
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
77
<?php
	echo "<p name='outils'>";
	echo "lid famille choisi est ".$_POST["id_famille"]." !!!<br/>"; // test
	echo "lid matiere choisi est ".$_POST["id_matiere"]." !!!<br/>"; // test
	echo "lid character choisi est ".$_POST["id_tc_simple"]." !!!";  // test
	if(isset($_POST['id_famille']) && isset($_POST['id_matiere']) && isset($_POST['id_tc_simple']))
	{
 
	// 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");
 
// Requête finale (devant comporter les trois variables sélectionnées précédemment) 
$reponse = mysql_query("SELECT outils.*, famille_outils.image_famille
						FROM outils, famille_outils, materiaux, jointure_materiaux, jointure_caracteres, taille_caracteres_simple
						WHERE famille_outils.diametre_outil = outils.diametre_outil
						AND famille_outils.famille_outil = outils.famille_outil
						AND outils.id_outil = jointure_materiaux.id_outil 
						AND materiaux.id_matiere = jointure_materiaux.id_matiere
						AND outils.id_outil = jointure_caracteres.id_outil
						AND taille_caracteres_simple.id_tc_simple = jointure_caracteres.id_tc_simple
						AND famille_outils.id_famille = ".$_POST["id_famille"]."
						AND materiaux.id_matiere = ".$_POST["id_matiere"]."
						AND taille_caracteres_simple.id_tc_simple = ".$_POST["id_tc_simple"]."
						");						
 
// On affiche chaque resultats
		while($donnees = mysql_fetch_assoc($reponse))
		{
?>
 
 
				<!-- Voici le résultat présenté sous forme de descriptif de la référence d el'outil trouvé -->
		<div id="result">		
			<div class="row-fluid" id="results">
				<div class="span12"><p class="titre">Results: </p>
				<div class="span11" id="tool_result">
				<div class="span2">
				<img src="<?php echo $donnees['image_famille'];?>"></img>
				</div>
				<div class="span2">
				<h5><?php echo $donnees['famille_outil']; ?></h5> <br/>
				<p>Référence: <br/>
				<?php echo $donnees['reference_outil']; ?></p>
				</div>
				<div class="span4">
				<p>
				La famille de cet outil est : <?php echo $donnees['famille_outil']; ?> <br/>
				Caractéristiques : <br/>
				Diamètre: <?php echo $donnees['diametre_outil']; ?> <br/>
				Forme: <?php echo $donnees['forme_outil']; ?> <br/>
				Matière: <?php echo $donnees['matiere_outil']; ?> <br/>
				Taille troncature: <?php echo $donnees['taille_troncature_outil']; ?>
				</p></em>
				</div>
				<div class="span4">
				<p>
				Il est utilisé pour les caractères simple line de <?php echo $donnees['taille_caract_simple']; ?><br />
				et en caractères multi line de <?php echo $donnees['taille_caract_multi']; ?><br /></em>
 
				</p>
				</div>
				</div>
				</div>
			</div>
		</div>
<?php 
		}
	}
	echo "</p>";
?>

Voilà tout mon code.
Mon dernier script est-il bon et mon onclick="goOutils()" est-il bien placé?
Je devrais rassembler mes 3 choix sur la même page?
Ça m'embête beaucoup de bloquer la dessus.
Merci

20/08/2013, 10h10
andry.aime
Citation:

Envoyé par Bhaalrock

Uncaught TypeError: Cannot read property 'value' of null myjs.js:79
goOutils myjs.js:79

cette ligne 79 c'est :

Code:

var id_famille = document.getElementById('id_famille').value;

C'est qu'il n'y a pas d'élément avec l'attribut id=id_famille dans la page index.php. Il en est de même pour
Citation:
Code:

1 2 var id_matiere = document.getElementById('id_matiere').value; var id_tc_simple = document.getElementById('id_tc_simple').value;
.

A+.
20/08/2013, 10h16
Bhaalrock

Pourtant mon id_famille est bien envoyé dans les pages php de mes choix 2 et 3 et cela fonctionne.
Comment faire pour que cela fonctionne avec mes 3 variables id?
20/08/2013, 10h20
andry.aime

Ben, dans les deux fonctions tu les as passés en paramètre.

A+.
20/08/2013, 10h25
Bhaalrock

Et je ne peux pas le faire pour passer 3 variables?
Je dois avouer que je suis un peu largué.
J'ai essayé plein de configurations différentes.
C'est à quel endroit de mon script que je pêche?
20/08/2013, 10h35
andry.aime

Je parle de cette variable

Citation:

Code:

function goMateriaux(id_famille)

pas celui de xhr.send("...");

Oui cette partie fonctionne.
Mais cela ne fonctionne pas si j'essaye de faire passer plusieurs variables
Code:

1 2 3 4 5 function goOutils(){ var xhr = getXhr(); var id_famille = document.getElementById('id_famille').value; var id_matiere = document.getElementById('id_matiere').value; var id_tc_simple = document.getElementById('id_tc_simple').value;
OU
Code:

1 2 function goOutils(id_famille, id_matiere, id_tc_simple){ var xhr = getXhr();
ne fonctionnent pas.
Je dois donc avoir un problème sur mes variables, mais je ne sais pas comment les récupérer correctement avec la méthode Ajax, avec le fait qu'elles sont chacune sur une page différente.

Code:

1 2 3 function goOutils(id_famille, id_matiere, id_tc_simple){ var xhr = getXhr(); xhr.onreadystatechange = function(){
Sinon, je te conseille de revoir les bases de javascript.

A+.

20/08/2013, 11h39
Bhaalrock

Tu me conseil cette façon la alors ?
En fait, je suis en stage, j'ai peu de temps devant moi et ça fait des heures et des heures que je planche la dessus sans succès :cry:
Tous mes essais ne fonctionnent pas et c'est le dernier problème que je rencontre (après je n'ai plus que de la mise en forme à faire).

Je veux juste parvenir à faire passer mes 3 variables, si une autre idée sur la façon de faire vient à quelqu'un, je suis preneur.
L'ajax me rend fou :calim2:
20/08/2013, 11h44
andry.aime

Avec le temps que tu as passé sur cette discussion, si tu avais lu un tutoriel Javascript et Ajax, tu aurais bien compris les conseils et tu aurais pu résoudre seul.

A+.
20/08/2013, 11h48
Invité

Citation:

Envoyé par Bhaalrock

..., j'ai peu de temps devant moi et ça fait des heures et des heures que je planche la dessus sans succès...

Je dis : "LOL". Et je :plusser: andry.aime.

Citation:

Envoyé par Bhaalrock

..., si une autre idée sur la façon de faire vient à quelqu'un, je suis preneur.

Et : "re-LOL".
20/08/2013, 11h55
Bhaalrock

J'en ai lu beaucoup.
Je me suis fait bcp de tuto Ajax, mais tous ses tutos sont basés sur le même shéma!
C'est que sous forme de formulaire en listes liées et il ne montre que pour une seule variable.
Ou sous la forme de celui-ci : http://creer-un-site.fr/tp-ajax-ecri...-texte-292.php
qui utilise la méthode ajax pour un login et un pass.
Mais rien dans mon cas, et je n'arrive pas à les réadapter correctement.
Bon je vais relire ce que j'ai déjà lu et d'autres trucs j'aurais peu être un declick avant la fin de semaine, sinon stage raté.

Merci de votre aide et d'avoir essayé de m'aider
20/08/2013, 12h05
Invité

Tes <button...> n'ont ni name, ni id.
Comment veux-tu les identifier... :roll:

Voir 40 message(s) de cette discussion en une page