Discussion :

[karpe]

Bonjour à tous,

Ça fais un bail que je n'ai pas codé et mon regard se perd dans les méandres du langage ...
Du coup ma question est simple, j'essaie d'afficher des sous categories via un encodage Json de mes requetes catégories et sous catégories.
Les catégories, elles, s'affichent bien mais pas mes sous catégories.
Comment ecrire ma boucle en AJAX qui me permettra de lister mes sous catégorie dans mon conteneur HTML ?

Voici ma requête, cherchercategorieSelection.php

Code php :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
$categoriesId=$_POST['categoriesId'];
 
$result=$connect->query(
	'SELECT categories_id, categories_nom, categories_active, categories_statut '.
	'FROM categories '.
	'WHERE categories_id='.$categoriesId);
 
if($result->num_rows>0)
	{
	$row=$result->fetch_array(MYSQLI_ASSOC);
	$result=$connect->query(
		'SELECT souscategories_id, souscategories_nom '.
		'FROM souscategories '.
		'WHERE categories_id='.$categoriesId);
	$row['souscategories']=$result->fetch_all(MYSQLI_ASSOC);
 
	echo json_encode($row);
	}

Ma page categorie.php ou je dois faire l'affichage de mes sous-categories

Code html :

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

1
2
3
4
5
6
7
	<div class="form-group">
		        	<label for="editSousCategoriesName" class="col-sm-4 control-label">Sous-Catégorie: </label>
		        	<label class="col-sm-1 control-label">: </label>
					    <div class="col-sm-7">
					      <input type="text" class="form-control" id="editSousCategoriesName" placeholder="Nom de la Sous-catégorie" name="editSousCategoriesName" autocomplete="off">
					    </div>
		        </div>

et mon categorie.js qui est appelait à la fin de ma page categorie.php

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
		$.ajax({
			url: 'php_action/chercherCategorieSelection.php',
			type: 'post',
			data: {categoriesId: categoriesId},
			dataType: 'json',
			success:function(response) {
 
				// modal spinner
				$('.modal-loading').addClass('div-hide');
				// modal result
				$('.edit-categories-result').removeClass('div-hide');
				//modal footer
				$(".editCategoriesFooter").removeClass('div-hide');	
				// set the categories name
				$("#editCategoriesName").val(response.categories_nom);
 
 
				$("#editSousCategoriesId").val(response.souscategories_id);
 
 
 
                var sscat = (response['souscategories']['souscategories_nom']);
   				$("#editSousCategoriesName").innerHTML = +sscat;   			
   				//document.getElementById("editSousCategoriesName").innerHTML = +sscat;
 
/*   
 
while(++i<ar_.length)
{
	st_html+="<div>"+ar_[i]+"</div>";
}
            }
*/

[psychadelic]

heu, j'ai toujours un problème pour te comprendre...

tu veux faire quoi exactement ?
A = faire UNE SEULE requête ajax puis réaliser une boucle pour afficher les différentes "lignes" renvoyées par ta requette Ajax

ou

B =faire UNE SUITE de requêtes Ajax à exécuter en boucle et qui te renvoient chacune une seule ligne à ajouter à ton affichage ?


alors A ou B ????

PS: au passage en jQuery la méthode est
$("#editSousCategoriesName").HTML(sscat);
et non
$("#editSousCategoriesName").innerHTML = +sscat;

=> http://api.jquery.com/html/

sinon si tu veux ajouter des élément les un à la suites des autres ilf faut utiliser une méthode append => http://api.jquery.com/append/

[karpe]

Je sais que l'on a du mal à se comprendre toi et moi mais en gros voilà le resultat Json de ma requête :

Code :

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

1
2
3
	$row['souscategories']=$result->fetch_all(MYSQLI_ASSOC);
 
	echo json_encode($row);

Comment formuler ma boucle javascript ?

Code :

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

1
2
   var sscat = (response['souscategories']['souscategories_nom']);
   				$("#editSousCategoriesName").HTML(sscat); // Ce resultat ne m'affiche rien

pour arriver grossièrement à ce résultat dans ma categorie.php !?

Code html :

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

1
2
3
4
5
6
7
8
9
<td>
  <input type="text" class="form-control" id="editSousCategoriesName[1]" placeholder="Nom de la Sous-catégorie1" name="editSousCategoriesName[1]">
</td>					
<td>
  <input type="text" class="form-control" id="editSousCategoriesName[2]" placeholder="Nom de la Sous-catégorie2" name="editSousCategoriesName[2]">
</td>					
<td>
...
</td>

[psychadelic]

C'est bizarre de répondre à ma question par une question, me répondre A ou B aurait été simple ?

Donc je prend l’hypothèse A, une seule requête ajax retournant ton tableau de données.

Le truc c'est que je ne vois pas trop ce qu'il y a dans ce tableau, est-ce que tu pourrais donner ici une copie de ce contenu ?? ( ça m'aiderai à te répondre, et j'ai perdu l'habitude avec le SQL )

il suffi juste de rajouter cette ligne
console.log(" retour Ajax ==> response <== " + JSON.stringify( response ));
à la suite de
success:function(response) {
ce qui donnerai :

Code :

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

1
2
3
4
5
6
7
$.ajax({
    url: 'php_action/chercherCategorieSelection.php',
    type: 'post',
    data: {categoriesId: categoriesId},
    dataType: 'json',
    success:function(response) {
        console.log(" retour Ajax ==> response <== " + JSON.stringify( response ));

puis faire la copie de ce résultat issu de la console du débogueur de ton navigateur ( sur FireFox = touche F12 , puis choisir l'onglet Console ).
( les 3 ou 4 premières occurrences suffiront )

PS :

mais en gros voilà le résultat JSON de ma requête :

Code :

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

1
2
3
4
 
	$row['souscategories']=$result->fetch_all(MYSQLI_ASSOC);
 
	echo json_encode($row);

non, ça ce n'est pas un résultat JSON, c'est code PHP qui renvoie des données JSON, le résultat en JSON on le voit pas du tout ici...

[karpe]

Bon écoutes,
Je viens sur ce forum, car je cherche de l'aide et du conseil, je viens pas ici pour me faire rabaisser par un type qui expose clairement mon manque de langage technique.
Sur tous sujets que je post, il n'y a pas une réponse de ta part ou j'ai le sentiment d’être pris pour une merde.
je ne suis pas un professionnel du développement, je te le redis et j'ai un taf à côté qui me prends déjà tout mon temps.

Tu ne sembles pas avoir les mêmes capacités de compréhension que d'autres membres de ce forum... Donc ! Tu me poses une question infantilisante, à savoir A ou B. Je te redis, que je ne suis pas professionnel du JS, et encore moins AJAX. Ce qui par conséquent induit que je ne sais pas forcément quelle méthode utilisée. Tout ce dont je peux te faire part c'est le résultat souhaité. Ce que j'ai fais. Après, le bon sens aurait voulu que tu me portes conseil sur un éventuel choix.!

Bref. Pour répondre à ta question, voici la réponse de la console. Il s'avére que les sous-catégories sont bien encodés avec l'identifiant de catégorie. Le problème est donc de retranscrire la formule magique qui permettra l'affichage/listage des sous catégories. Je te fais confiance pour reprendre derrière moi ce qui a été mal exprimé

Code :

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

 retour Ajax ==> response <== {"categories_id":"59","categories_nom":"TESTK","categories_active":"1","categories_statut":"1","souscategories":[{"souscategories_id":"75","souscategories_nom":"sousTestK1"},{"souscategories_id":"76","souscategories_nom":"sousTestK2"}]}

Le résultat visuel actuel :





Dans le cas ou une quelconque suffisance recevrait mal mes propos, stp ne réponds pas à ce message et passe ton chemin.
J'ai besoin d'une solution mais ne me rabaisserai pour elle.
Merci

[psychadelic]

Heu, je ne cherche qu’a t’aider, et il n’y a aucune mauvaise intention de ma part*; tu devrai lire mes autres messages ou je réponds aussi à d’autres internautes de ce site, et tu verra bien que je ne cherche qu’a avoir des réponses constructives.

Si je t’ai posé une question en A ou B, c’est que réellement, je me pose la question de savoir si ce que tu demande est l’une ou l’autre, car elles amènent chacune à 2 réponses complètement différentes.

Passons, j’espère que la suite t’aidera; voici le système de boucle que tu recherchais:

Code JavaScript :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
      lignes_SousCatHTML = '<tr>';
 
      for (var i = 0; i < response.souscategories.length; i++) {
 
        lignes_SousCatHTML += '<td>';
        lignes_SousCatHTML += '<input type="text" class="form-control"';
        lignes_SousCatHTML += ' id="'+response.souscategories[i].souscategories_id +'"';
        lignes_SousCatHTML += ' name="'+response.souscategories[i].souscategories_id +'"';
        lignes_SousCatHTML += ' placeholder="'+response.souscategories[i].souscategories_nom +'"';
        lignes_SousCatHTML += ' />';
        lignes_SousCatHTML += '</td>';
      }
      lignes_SousCatHTML += '</tr>';
      // $tbl_SousCat.empty();
 
      $tbl_SousCat.html(lignes_SousCatHTML);

J'ai même fait un mini-exemple (en reprenant les valeurs de ton log précédent):

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
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
<!doctype html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>test retour json</title>
</head>
<body>
  <h3>test retour json</h3>
  <table id="editSousCategoriesName"><tr><td>...</td></tr></table>
 
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script type="text/javascript">
 
    $(document).ready(function(){ 
      var
        $tbl_SousCat = $('#editSousCategoriesName'),
        lignes_SousCatHTML = "",
        response = {
          "categories_id":"59",
          "categories_nom":"TESTK",
          "categories_active":"1",
          "categories_statut":"1",
          "souscategories":
            [
              {"souscategories_id":"75","souscategories_nom":"sousTestK1"},
              {"souscategories_id":"76","souscategories_nom":"sousTestK2"}
            ]
        }
      ;
 
      lignes_SousCatHTML = '<tr>';
 
      for (var i = 0; i < response.souscategories.length; i++) {
 
        lignes_SousCatHTML += '<td>';
        lignes_SousCatHTML += '<input type="text" class="form-control"';
        lignes_SousCatHTML += ' id="'+response.souscategories[i].souscategories_id +'"';
        lignes_SousCatHTML += ' name="'+response.souscategories[i].souscategories_id +'"';
        lignes_SousCatHTML += ' placeholder="'+response.souscategories[i].souscategories_nom +'"';
        lignes_SousCatHTML += ' />';
        lignes_SousCatHTML += '</td>';
      }
      lignes_SousCatHTML += '</tr>';
 
      // $tbl_SousCat.empty();
 
      $tbl_SousCat.html(lignes_SousCatHTML);
 
    });
  </script>
</body>
</html>