[AJAX] Retour d'une valeur mise dans une BDD via 2 listes liées

**PeGaZe33** · 21/07/2010, 18h04

Bonjour à tous.

Nouveau sur ce forum, je tiens déjà à en féliciter l'ensemble des membres car il m'a servi bon nombre de fois.

Néanmoins, j'ai un souci de création d'une page d'administration d'un site.
En effet, et pour essayer d'être le plus clair possible, j'ai un panneau d'administration qui gère des produits qui sont classés après par catégorie et sous-catégorie.
Les listes des catégories et sous-catégories sont générées via une BDD (Merci AJAX ^^).
L'ensemble fonctionne bien : je peux sélectionner la catégorie souhaitée et la sous-catégorie associée. Je peux également enregistrer l'ensemble des informations dans ma Table "produits". Donc pas de problème à ce niveau.

Le soucis est le suivant : de mon panneau d'administration, je peux consulter la fiche de mon produit au cas où je voudrais en modifier un élément (catégorie et sous-catégorie inclus).
Actuellement, je vois tout ce qui a été inscrit dans ma table "produits" (via des champs de texte) et la catégorie choisie. Par contre, la sous-catégorie, impossible de la faire remonter dans cet affichage.

Voici les codes de ce que je viens d'expliquer

Code de la fiche produit

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
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
 
<?php 
		$idProd = 0;
		$nom = "";
		$comCourt ="";
		$comLong ="";
		$prix ="";
		$idCat = "";
		$idSCat = "";
 
    if (isset($_GET['veidProd']) && is_numeric($_GET['veidProd'])) {
			include('../Connections/connect_admin.php');
 
			$veidProd = $_GET['veidProd'];
 
			$reqres=mysql_query("SELECT * FROM produits WHERE produits.idProd='".mysql_real_escape_string($veidProd)."'");
			$nbenr=mysql_num_rows($reqres);
 
			if ($nbenr!=0) {
				$a_row = mysql_fetch_array($reqres);
 
				$idProd = $a_row["idProd"];
			  $nom = $a_row["nomProd"];
			  $comCourt = $a_row["comProdCourt"];
			  $comLong = $a_row["comProdLong"];
			  $prix = $a_row["prixProd"];
			  $idCat = $a_row["idCat"];
			  $idSCat = $a_row["idSousCat"];
			}
 
      mysql_close($connect_admin);
		}
 
		?>
<head>
<script type="text/javascript">
 
		  // On utilise un fonction pour déclarer l'objet XMLHttpRequest
			function getXMLHttpRequest() {
				var xhr = null;
 
				if (window.XMLHttpRequest || window.ActiveXObject) {
					if (window.ActiveXObject) {
						try {
							xhr = new ActiveXObject("Msxml2.XMLHTTP");
						} catch(e) {
							xhr = new ActiveXObject("Microsoft.XMLHTTP");
						}
					} else {
						xhr = new XMLHttpRequest();
					}
				} else {
					alert("Votre navigateur ne supporte pas l'objet XMLHTTPRequest...");
					return null;
				}
 
				return xhr;
			}
 
			function clic() { try {
			  var xmlHttp = getXMLHttpRequest();
 
			  if (xmlHttp == null) {
			      alert("Votre navigateur ne supporte pas les requêtes HTTP.");
			      return false;
			  }
 
			  // fonction à exécuter dès réception de la réponse
			  xmlHttp.onreadystatechange = function() {
			      if (xmlHttp.readyState==4 && xmlHttp.status==200) {
			          leselect=xmlHttp.responseText;
					  document.getElementById('selectionSCategorie').innerHTML=leselect
				  }
			  }
 
				xmlHttp.open("POST","choix_SousCategorie.php",true);
				xmlHttp.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
				sel=document.getElementById('selectionCategorie');
				idCat=sel.options[sel.selectedIndex].value;
				alert(idCat);
				xmlHttp.send("idCat="+idCat);
			}catch(e) {alert(e);}}
		</script>
</head>
<body>
<form method="post" name="fDonnees" action="validFicheProduit.php">
				      <input type="hidden" name="idProd" id="idProd" value="<?php echo $idProd ?>"/>
 
				      <table id="fiche">
				        <tr>
				          <th>Nom du produit</th>
				          <td><input type="text" style="width: 400px" name="nomProduit" id="nomProduit" value="<?php echo $nom ?>"/></td>
 
						</tr>
                        <tr>
				          <th>Commentaire Court</th>
				          <td><textarea rows="20" name="comCourt" id="comCourt"> <?php echo $comCourt ?> </textarea></td>
								</tr>
				        <tr>
                        <tr>
				          <th>Commentaire Long</th>
				          <td><textarea rows="20" name="comLong" id="comLong"> <?php echo $comLong ?> </textarea></td>
								</tr>
				        <tr>
                                <tr>
				          <th>Catégorie du produit</th>
				          <td><select id="selectionCategorie"name="selectionCategorie" onchange="clic()">
                          <option value="-1">Aucun</option>
				        <?php
                                                include ('../Connections/connect_admin.php');
                                                
                                                $reqres=mysql_query("SELECT * FROM categorie");
                                                while ($a_row = mysql_fetch_array($reqres)) {
                                                  if ($idCat == $a_row["idCat"]) {
                  echo "<option value='".$a_row["idCat"]."' selected='selected'>".$a_row["nomCat"]."</option>";
                                                        } else {
                  echo "<option value='".$a_row["idCat"]."'>".$a_row["nomCat"]."</option>";
                                                        }
                                                }
                                                mysql_close($connect_admin);
                                        ?> 
							</select> <?php echo $idCat ?></td>
								</tr>
 
				        <tr>
                        <tr>
                                <tr>
				          <th>Sous-Catégorie du produit</th>
				          <td><select id="selectionSCategorie" name="selectionSCategorie">
                          <option value="-1">Sous-catégorie associée</option>
							</select> <?php echo $idSCat ?></td>
								</tr>
 
				        <tr>
                        <tr>
                                <tr>
				          <th>Prix du produit</th>
				          <td><input type="text" style="width: 400px" name="prixProd" id="prixProd" value="<?php echo $prix ?>"/></td>
								</tr>
 
				        <tr>
 
				        <tr>
				          <td colspan="2">
				            <input type="submit" value="Valider" name="btnValider"/>
				          </td>
				        </tr>
							</table>
				    </form>
</body>

Code de validFicheProduit

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
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
 
<?php 
if (is_string($_POST['nomProduit']) && (is_string($_POST['comCourt'])) && (is_string($_POST['comLong'])) && (is_string($_POST['prixProd'])) && (is_string($_POST['selectionCategorie'])) && (is_string($_POST['selectionSCategorie']))) {
			  $nom = stripslashes(htmlentities($_POST["nomProduit"]));
			  $comCourt = stripslashes(htmlentities($_POST["comCourt"]));
			  $comLong = stripslashes(htmlentities($_POST["comLong"]));
			  $prixProd = stripslashes(htmlentities($_POST["prixProd"]));
			  $idCat = stripslashes(htmlentities($_POST["selectionCategorie"]));
			  $idSCat = stripslashes(htmlentities($_POST["selectionSCategorie"]));
			  $idProd = $_POST["idProd"];
 
	    if (is_numeric($idProd)) {
				include('../Connections/connect_admin.php');
 
				if ($idProd > 0) {
					// On est en mode modification
					$reqres=mysql_query("UPDATE produits SET nomProd='".mysql_real_escape_string($nom)."',comProdCourt='".mysql_real_escape_string($comCourt)."', comProdLong='".mysql_real_escape_string($comLong)."', prixProd='".mysql_real_escape_string($prixProd)."', idCat='".mysql_real_escape_string($idCat)."', idSousCat='".mysql_real_escape_string($idSCat)."' WHERE idProd='".$idProd."'");
				} else {
					// On est en mode ajout
					$reqres=mysql_query("INSERT INTO produits VALUES ('','".mysql_real_escape_string($nom)."','".mysql_real_escape_string($comCourt)."','".mysql_real_escape_string($comLong)."','".mysql_real_escape_string($prixProd)."','".mysql_real_escape_string($idCat)."','".mysql_real_escape_string($idSCat)."')");
				}	
		    $nom = "";
			$comCourt = "";
			$comLong ="";
			$prixProd ="";
			$idCat ="";
			$idSCat ="";
 
				$reqres=mysql_query("SELECT * FROM produits WHERE idProd='".mysql_real_escape_string($idProd)."'");
			$nbenr=mysql_num_rows($reqres);
 
			if ($nbenr!=0) {
				$a_row = mysql_fetch_array($reqres);
 
				$idProd = $a_row["idProd"];
			  $nom = $a_row["nomProd"];
			  $comCourt = $a_row["comProdCourt"];
			  $comLong = $a_row["comProdLong"];
			  $prix = $a_row["prixProd"];
			  $idCat = $a_row["idCat"];
			  $idSCat = $a_row["idSousCat"];
				}
 
				mysql_close($connect_admin);
			}
    }
 
		?>
<head>
<script type="text/javascript">
 
		  // On utilise un fonction pour déclarer l'objet XMLHttpRequest
			function getXMLHttpRequest() {
				var xhr = null;
 
				if (window.XMLHttpRequest || window.ActiveXObject) {
					if (window.ActiveXObject) {
						try {
							xhr = new ActiveXObject("Msxml2.XMLHTTP");
						} catch(e) {
							xhr = new ActiveXObject("Microsoft.XMLHTTP");
						}
					} else {
						xhr = new XMLHttpRequest();
					}
				} else {
					alert("Votre navigateur ne supporte pas l'objet XMLHTTPRequest...");
					return null;
				}
 
				return xhr;
			}
 
			function clic() { try {
			  var xmlHttp = getXMLHttpRequest();
 
			  if (xmlHttp == null) {
			      alert("Votre navigateur ne supporte pas les requêtes HTTP.");
			      return false;
			  }
 
			  // fonction à exécuter dès réception de la réponse
			  xmlHttp.onreadystatechange = function() {
			      if (xmlHttp.readyState==4 && xmlHttp.status==200) {
			          leselect=xmlHttp.responseText;
					  document.getElementById('selectionSCategorie').innerHTML=leselect
				  }
			  }
 
				xmlHttp.open("POST","choix_SousCategorie.php",true);
				xmlHttp.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
				sel=document.getElementById('selectionCategorie');
				idCat=sel.options[sel.selectedIndex].value;
				alert(idCat);
				xmlHttp.send("idCat="+idCat);
			}catch(e) {alert(e);}}
		</script>
</head>
<body>
<form method="post" name="fDonnees" action="validFicheProduit.php">
				      <input type="hidden" name="idProd" id="idProd" value="<?php echo $idProd ?>"/>
 
				      <table id="fiche">
				        <tr>
				          <th>Nom du produit</th>
				          <td><input type="text" style="width: 400px" name="nomProduit" id="nomProduit" value="<?php echo $nom ?>"/></td>
 
						</tr>
                        <tr>
				          <th>Commentaire Court</th>
				          <td><textarea rows="20" name="comCourt" id="comCourt"> <?php echo $comCourt ?> </textarea></td>
								</tr>
				        <tr>
                        <tr>
				          <th>Commentaire Long</th>
				          <td><textarea rows="20" name="comLong" id="comLong"> <?php echo $comLong ?> </textarea></td>
								</tr>
				        <tr>
                        <tr>
				          <th>Catégorie du produit</th>
				          <td><select id="selectionCategorie"name="selectionCategorie" onchange="clic()">
                          <option value="-1">Aucun</option>
				        <?php
                                                include ('../Connections/connect_admin.php');
                                                
                                                $reqres=mysql_query("SELECT * FROM categorie");
                                                while ($a_row = mysql_fetch_array($reqres)) {
                                                  if ($idCat == $a_row["idCat"]) {
                  echo "<option value='".$a_row["idCat"]."' selected='selected'>".$a_row["nomCat"]."</option>";
                                                        } else {
                  echo "<option value='".$a_row["idCat"]."'>".$a_row["nomCat"]."</option>";
                                                        }
                                                }
                                                mysql_close($connect_admin);
                                        ?> 
							</select> <?php echo $idCat ?></td>
								</tr>
 
				        <tr>
                        <tr>
                                <tr>
				          <th>Sous-Catégorie du produit</th>
				          <td><select id="selectionSCategorie" name="selectionSCategorie" style="display:inline">
                          <option value="-1">Sous-catégorie associée</option>
							</select> <?php echo $idSCat ?></td>
								</tr>
                                <tr>
				          <th>Prix du produit</th>
				          <td><input type="text" style="width: 400px" name="prixProd" id="prixProd" value="<?php echo $prix ?>"/></td>
								</tr>
 
				        <tr>
 
				        <tr>
				          <td colspan="2">
				            <input type="submit" value="Valider" name="btnValider"/>
				          </td>
				        </tr>
							</table>
				    </form>
</body>

Et enfin, le code de choix_sousCategorie

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
 
<?php
 
        $idCat = $_POST["idCat"];
        
  include ('../Connections/connect_admin.php');
  $reqres=mysql_query("SELECT * FROM sous_categorie WHERE idCat='".$idCat."'");
 $nbenr=mysql_num_rows($reqres);
  
  if ($nbenr!=0) {
  
          while ($a_row = mysql_fetch_array($reqres)) {
                if ($idSCat == $a_row["idSousCat"]) {
  echo "<option value='".$a_row["idSousCat"]."' selected='selected'>".$a_row["nomSousCat"]."</option>";
                  } else {
  echo "<option value='".$a_row["idSousCat"]."'>".$a_row["nomSousCat"]."</option>";
                  }
  }
            mysql_close($connect_admin);
    else {
          if ($idCat==-1){
                  echo "<option value='-1'>Sous-catégorie associée</option>";
          } else {
                  echo "<option value='-1'>Aucune sous-catégorie associée</option>";
          }
  }
 
?>

Comme vous pourrez le constater, il y a une condition dans le dernier code

Code :

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

1
2
3
4
5
if ($idSCat == $a_row["idSousCat"]) {
  echo "<option value='".$a_row["idSousCat"]."' selected='selected'>".$a_row["nomSousCat"]."</option>";
		  } else {
  echo "<option value='".$a_row["idSousCat"]."'>".$a_row["nomSousCat"]."</option>";
		  }

Et c'est cette condition sur "$idSCat" que je n'arrive pas à remonter dans ma fiche produit.

Si quelqu'un à une idée à me suggérer pour résoudre ce problème, ce serai très sympa de sa part

D'avance merci

PS : je viens de remarquer que je vous ai laissé dans le code mes étapes de contrôle

désolé (ou pas, si ca vous aide ^^)

**PeGaZe33** · 23/07/2010, 09h44

Ce problème est trop compliqué ou impossible à faire ?

**gwyohm** · 23/07/2010, 10h31

Bonjour,

Le code que tu nous donne est très (trop) dense. Perso, je n'ai pas réellement saisi ton problème.
Si tu es bloqué au niveau javascript, peux tu nous montrer le code HTML généré par le php, et nous expliquer ce que tu souhaites récupérer comme info ?

**PeGaZe33** · 23/07/2010, 13h59

Bonjour,

En fait, pour expliquer plus simplement, j'ai une liste déroulante avec une liste de catégories et une 2de (qui est liée à la première) avec une liste de sous-catégories.
Je peux enregistrer dans ma base l'ensemble des informations mais lorsque je réouvre ma fiche produit (pour voir ce qu'il en est ou y modifier des informations), n'est présélectionné que ma 1ère liste déroulante avec les informations reprises de la BDD. La 2de est toujours sur la valeur par défaut (value=-1). Normal me direz vous vu que cette 2de liste est chargée par AJAX (code "choix_sousCategorie").

Or j'aimerai (pour une facilité de lecture) voir sur cette fiche : la catégorie ET la sous-catégorie déjà enregistrées dans la BDD.

Voici le code source (la partie traitant de ce problème - Extrait du code "Fiche Produit") de la page telle qu'elle est générée actuellement lorsque je consulte une fiche déjà créée.

Code HTML :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
<tr>
<th>Catégorie du produit</th>
<td><select id="selectionCategorie"name="selectionCategorie" onchange="clic()">
    <option value="-1">Aucun</option>
    <option value='7'>Hebergement</option><option value='6' selected='selected'>Site</option><option value='8'>Referencement</option><option value='9'>Blog</option><option value='10'>E-commerce</option><option value='11'>Option</option> 
</select> 6</td>
</tr>
 
<tr>
<th>Sous-Catégorie du produit</th>
<td><select id="selectionSCategorie" name="selectionSCategorie">
      <option value="-1">Sous-catégorie associée</option>
</select> 9</td>
</tr>

PS : les chiffres se situant en fin de code sont les id enregistrés dans ma BDD

En espérant avoir plus clairement exposé mon souci

D'avance merci pour ceux qui ont une solution à m'apporter

**gwyohm** · 23/07/2010, 14h31

Bonjour,

C'est plus clair en effet.
Quand tu es dans ton callback ajax, après avoir récupéré les sous-catégories, tu peux en javascript boucler sur chacune des options pour détecter si la valeur est celle attendue. Tu n'as alors qu'à la définir comme selected. Admettons que l'id de ta sous-catégorie soit disponible en javascript via la variable souscategid:

Code :

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

1
2
3
4
5
6
7
8
9
 
var souscategid = ...
var selectSousCateg = document.getElementById("selectionSCategorie");
for(var i=0,size=selectSousCateg .options.length;i<size;i++) {
  if(souscategid == selectSousCateg.options[i].value ) {
    selectSousCateg.options[i].selected = true;
break;
  }
}

**PeGaZe33** · 23/07/2010, 14h42

Comment boucler sur les options vu que celles-ci n'existent que par l'intermédiaire de mon fichier "choix_sousCategorie" (qui est appelé que lorsqu'un choix de catégorie est fait) et que la seule option présente dans mon fichier "fiche produit" est la valeur par défaut (value = -1) ?

[AJAX] Retour d'une valeur mise dans une BDD via 2 listes liées

AJAX

Vue hybride

Discussions similaires

Partager

Partager