[AJAX] Plusieurs variables sql dans une fonction Ajax

Version imprimable

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

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