Récupérer un ID de table avec AJAX vers PHP

**karpe** · 05/03/2018, 13h30

Bonjour à tous,

Voilà quelques jours que je sèche sur une récupération d'ID.
Je souhaite afficher les sous catégorie à modifier suivant l'ID article. Je récupère bien celui de mes catégories en JS avec AJAX.

Ci-dessous, visuellement la problèmatique.

Nom : Capture du 2018-03-05 13-27-35.png
Affichages : 2253
Taille : 111,1 Ko

Nom : Capture du 2018-03-05 13-27-35.png
Affichages : 2253
Taille : 111,1 Ko

La ligne qui me pose problème :
Comment récupérer cette valeur (48) sans recharger la page ?
Je sais la récupérer dans un input via JS et AJAX. Mais comment la récupérer pour l'insérer dans ma requête PHP ?
J'ai suivi une discussion sur les XHR. Est-ce possible ? Et si oui comment ? Ou une autre solution peut-être ...?

Code php :

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

<?php $categorieId = '48'; //Récupérer cette valeur en JS

Voici ma partie complète de categorie PHP :

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
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
<!-- edit categories brand -->
<div class="modal fade" id="editCategoriesModal" tabindex="-1" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
 
    	<form class="form-horizontal" id="editCategoriesForm" action="php_action/modifierCategorie.php" method="POST">
	      <div class="modal-header">
	        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
	        <h4 class="modal-title"><i class="fa fa-edit"></i> Modifier la catégorie</h4>
	      </div>
	      <div class="modal-body">
 
	      	<div id="edit-categories-messages"></div>
 
	      	<div class="modal-loading div-hide" style="width:50px; margin:auto;padding-top:50px; padding-bottom:50px;">
						<i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>
						<span class="sr-only">Loading...</span>
					</div>
 
		      <div class="edit-categories-result">
		      	<div class="form-group">
		        	<label for="editCategoriesName" class="col-sm-4 control-label">Catégorie: </label>
		        	<label class="col-sm-1 control-label">: </label>
					    <div class="col-sm-7">
					      <input type="text" class="form-control" id="editCategoriesName" placeholder="Nom de la catégorie" name="editCategoriesName" autocomplete="off">
					    </div>
		        </div> <!-- /form-group-->	
 
		      <div class="edit-categories-result">
		      	<div class="form-group">
		        	<label for="editCatId" class="col-sm-4 control-label">Catégorie: </label>
		        	<label class="col-sm-1 control-label">: </label>
					    <div class="col-sm-7">
					      <input type="text" class="form-control" id="editCatId" placeholder="Nom de la catégorie" name="editCatId" autocomplete="off">
					    </div>
		        </div> <!-- /form-group-->	
 
 
 
 
<!-- DEBUT Modifier une sous catégorie-->		 
 
<table class="table">
			  	<tbody>
			  		<?php $categorieId = '48'; //Récupérer cette valeur en JS
 
                                        $affichesousCatSql = "SELECT souscategories_id, categories_id, souscategories_nom FROM souscategories WHERE categories_id = {$categorieId}";
                                                $affichesousCatResult = $connect->query($affichesousCatSql);
                
                
                                        $arrayNumber = 0;
                                        // for($x = 1; $x <= count($delivranceItemData); $x++) {
                                        $x = 1;
                                        while($affichesousCatData = $affichesousCatResult->fetch_array()) { 
                                                // print_r($delivranceItemData); ?>
			  			<tr id="row<?php echo $x; ?>" class="<?php echo $arrayNumber; ?>">	
			  				<td>
			  				<div class="form-group">
		        			<label for="editsousCategoriesName<?php echo $x; ?>" class="col-sm-4 control-label">Sous Catégorie: <?php echo $x; ?></label>
		        			<label class="col-sm-1 control-label">: </label>
					   		 <div class="col-sm-6">		  					
			  						<input type="text" name="editsousCategoriesName[]" id="editsousCategoriesName<?php echo $x; ?>" autocomplete="off" class="form-control" value="<?php echo $affichesousCatData['souscategories_nom']; ?>" />			  					
			  			 		</div>	
 
					   	<div class="col-sm-1">
			  					<button class="btn btn-default removeProductRowBtn" type="button" id="removeProductRowBtn" onclick="removeProductRow(<?php echo $x; ?>)"><i class="glyphicon glyphicon-trash"></i></button>
			  				</div>	
		        			</div> <!-- /form-group-->	
			  			</tr>
		  			<?php
                                        $arrayNumber++;
                                        $x++;
                                        } // /for
                                        ?>
			  	</tbody>			  	
  </table>
 
 
 
<!-- FIN Modifier une sous catégorie-->				  
 
 
 
		        <div class="form-group">
		        	<label for="editCategoriesStatus" class="col-sm-4 control-label">Statut: </label>
		        	<label class="col-sm-1 control-label">: </label>
					    <div class="col-sm-7">
					      <select class="form-control" id="editCategoriesStatus" name="editCategoriesStatus">
					      	<option value="">~~SELECT~~</option>
					      	<option value="1">Disponible</option>
					      	<option value="2">Indisponible</option>
					      </select>
					    </div>
		        </div> <!-- /form-group-->	 
		      </div>         	        
		      <!-- /edit brand result -->
 
	      </div> <!-- /modal-body -->
 
	      <div class="modal-footer editCategoriesFooter">
	        <button type="button" class="btn btn-default" data-dismiss="modal"> <i class="glyphicon glyphicon-remove-sign"></i> Annuler</button>
 
	        <button type="submit" class="btn btn-success" id="editCategoriesBtn" data-loading-text="Loading..." autocomplete="off"> <i class="glyphicon glyphicon-ok-sign"></i> Modifier la catégorie</button>
	      </div>
	      <!-- /modal-footer -->
     	</form>
	     <!-- /.form -->
    </div>
    <!-- /modal-content -->
  </div>
  <!-- /modal-dailog -->
</div>

Et mon code categorie.js

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
// edit categories function
function editCategories(categoriesId = null) {
	if(categoriesId) {
		// remove the added categories id 
		$('#editCategoriesId').remove();
		// reset the form text
		$("#editCategoriesForm")[0].reset();
		// reset the form text-error
		$(".text-danger").remove();
		// reset the form group errro		
		$('.form-group').removeClass('has-error').removeClass('has-success');
 
		// edit categories messages
		$("#edit-categories-messages").html("");
		// modal spinner
		$('.modal-loading').removeClass('div-hide');
		// modal result
		$('.edit-categories-result').addClass('div-hide');
		//modal footer
		$(".editCategoriesFooter").addClass('div-hide');		
 
		$.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');	
				//Affichage de l'ID
				$("#editCatId").val(response.categories_id);
				// set the categories name
				$("#editCategoriesName").val(response.categories_nom);
 
 
 
				// set the categories statut
				$("#editCategoriesStatus").val(response.categories_active);
				// add the categories id 
				$(".editCategoriesFooter").after('<input type="hidden" name="editCategoriesId" id="editCategoriesId" value="'+response.categories_id+'" />');
 
 
				// submit of edit categories form
				$("#editCategoriesForm").unbind('submit').bind('submit', function() {
					var categoriesName = $("#editCategoriesName").val();
					var categoriesStatus = $("#editCategoriesStatus").val();
 
 
 
					if(categoriesName == "") {
						$("#editCategoriesName").after('<p class="text-danger">Un nom de catégorie est requis</p>');
						$('#editCategoriesName').closest('.form-group').addClass('has-error');
					} else {
						// remov error text field
						$("#editCategoriesName").find('.text-danger').remove();
						// success out for form 
						$("#editCategoriesName").closest('.form-group').addClass('has-success');	  	
					}
 
					if(categoriesStatus == "") {
						$("#editCategoriesStatus").after('<p class="text-danger">Un statut est requis</p>');
						$('#editCategoriesStatus').closest('.form-group').addClass('has-error');
					} else {
						// remov error text field
						$("#editCategoriesStatus").find('.text-danger').remove();
						// success out for form 
						$("#editCategoriesStatus").closest('.form-group').addClass('has-success');	  	
					}
 
					if(categoriesName && categoriesStatus) {
						var form = $(this);
						// button loading
						$("#editCategoriesBtn").button('loading');
 
						$.ajax({
							url : form.attr('action'),
							type: form.attr('method'),
							data: form.serialize(),
							dataType: 'json',
							success:function(response) {
								// button loading
								$("#editCategoriesBtn").button('reset');
 
								if(response.success == true) {
									// reload the manage member table 
									manageCategoriesTable.ajax.reload(null, false);									  	  			
 
									// remove the error text
									$(".text-danger").remove();
									// remove the form error
									$('.form-group').removeClass('has-error').removeClass('has-success');
 
			  	  			$('#edit-categories-messages').html('<div class="alert alert-success">'+
			            '<button type="button" class="close" data-dismiss="alert">&times;</button>'+
			            '<strong><i class="glyphicon glyphicon-ok-sign"></i></strong> '+ response.messages +
				          '</div>');
 
			  	  			$(".alert-success").delay(500).show(10, function() {
										$(this).delay(3000).hide(10, function() {
											$(this).remove();
										});
									}); // /.alert
								}  // if
 
							} // /success
						}); // /ajax	
					} // if
 
 
					return false;
				}); // /submit of edit categories form
 
			} // /success
		}); // /fetch the selected categories data
 
	} else {
		alert('Oops!! Refresh the page');
	}
} // /edit categories function

Merci de l'aide ou la piste que vous saurez m'apporter !

**psychadelic** · 05/03/2018, 15h11

pourquoi vouloir récupérer cette valeur alors qu tu l'a déjà pour faire ton appel Ajax ?

Code :

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

data: {categoriesId: categoriesId},

sinon ton code PHP : php_action/chercherCategorieSelection.php

Code :

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

 url: 'php_action/chercherCategorieSelection.php',

à l'air de renvoyer plein d'infos, tu peux y ajouter ton ID...

**karpe** · 05/03/2018, 19h30

En fait ce que je souhaite c'est affiché mes sous catégorie dans mon .php en fonction d'un ID de catégorie importé depuis mon .js
Ma page categorie.php n'est pas rechargé, elle incrémente les résultats en fonction du javascript.

Je sais le récupérer en JS pour l'afficher dans un input. Moi ce qui m’intéresse c'est de pouvoir afficher ce résultat directement dans ma requête en PHP.

Je cherche à récuperer ma valeur 48 (CatégorieId) directement depuis mon fichier JS sans recharger la page :

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
 
// Je veux récuperer le 
<?php $categorieId = '48'; ?>
 
 
// En JS, je l'ai dans mon categorie.js
 
<script>
 
 
				$("#editCatId").val(response.categories_id);
 
</script>
 
 
//Moi ce que je voudrais dans mon categorie.php, c'est au final, pour imager écrire un truc du style :
 
<? php
 
$RecupCatID= "'+response.categories_id+'"; 
 
 $categorieId = $RecupCatID;

une idée, une piste ?

**psychadelic** · 05/03/2018, 20h27

c'est pas clair ton truc

si j'ai bien compris ce que tu cherche à faire c'est tout simplement ça:

Code :

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

1
2
3
4
5
6
7
<script  type="text/javascript">
 
// ...
 
   var valeurCatégorie = <?=$categorieId?>;
 
 // ...

**karpe** · 05/03/2018, 20h36

Oui désolé si je suis pas clair. Je m'en rend compte.
Mais pour répondre à ta suggestion, je souhaite faire précisément l'inverse.
C.a.d que tu me proposes d'ecrire du PHP dans du Javascript. Moi je souhaite ecrire une donnée javascript dans ma requete php.

As-tu une idée pour cela ?

**mathieu** · 05/03/2018, 21h31

Je ne comprends pas d'où vient cette valeur.

Pouvez vous expliquer ce que l'utilisateur fait quand il est sur la page de la capture d'écran, en détaillant seulement du point de vue de l'utilisateur et sans parler de code ?

**karpe** · 05/03/2018, 21h47

La valeur '48' est un identifiant test de catégorie. Pour l'exemple j'aurais pu mettre 32,17,44,...
Le nom réel de la catégorie est 'TESTC'.
Le visiteur sur cette page se trouve dans la popup de modification des catégorie et sous catégorie.

Le nom de catégorie est l'id sont géneré depuis la datatable de mon .js.
Les sous-catégorie doivent être géneré en fonction de l'ID bouclé depuis le .js

Le problème est que je ne sais pas comment écrire ma requête pour afficher proprement mes sous-catégorie/

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
 
//La donnée ID du javascript (48)
<script>
$("#editCatId").val(response.categories_id);</script>
 
 
//Que je souhaite récupérer pour écrire ma requête et remplacer ce '48' en test par une variable de récupération JS
 
<?php $categorieId = '48'; //Récupérer cette valeur en JS
 
                                        $affichesousCatSql = "SELECT souscategories_id, categories_id, souscategories_nom FROM souscategories WHERE categories_id = {$categorieId}";
                                                $affichesousCatResult = $connect->query($affichesousCatSql);
?>

**karpe** · 05/03/2018, 22h12

Je vais le reformuler autrement :

categorie.js

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
 
		$.ajax({
			url: 'php_action/chercherCategorieSelection.php',
			type: 'post',
			data: {categoriesId: categoriesId},
			dataType: 'json',
			success:function(response) {
 
				//Affichage de l'ID
				$("#editCatId").val(response.categories_id); // VALEUR QUI SAFFICHE TRES BIEN DANS L'INPUT
				// set the categories name
				$("#editCategoriesName").val(response.categories_nom);
 
				// add the categories id 
				$(".editCategoriesFooter").after('<input type="hidden" name="editCategoriesId" id="editCategoriesId" value="'+response.categories_id+'" />');

categorie.php

Code :

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

1
2
3
4
5
6
 
 <input type="text" class="form-control" id="editCatId" placeholder="Nom de la catégorie" name="editCatId" autocomplete="off">
 
<?php $categorieId = 'valeur de editCatId que je souhaite afficher ici pour executer ma requete'; // 
			  		$affichesousCatSql = "SELECT souscategories_id, categories_id, souscategories_nom FROM souscategories WHERE categories_id = {$categorieId}";
						$affichesousCatResult = $connect->query($affichesousCatSql);

J'arrive à récupérer la valeur suivante dans un input (ligne 2 de categorie.php):
$("#editCatId").val(response.categories_id);

Je veux que cette valeur s'affiche ligne 4 de mon fichier categorie.php

J’espère être plus compréhensible.
Merci de votre soutien

**psychadelic** · 05/03/2018, 22h55

ben c'est toujours pas clair.

déjà on ne peut pas deviner ce que génére ton php, ce serait mieux de nous montrer ce qu'il génère en html, même si ce n'est pas encore fonctionnel

ensuite ton appel ajax iinitialement issu d'une fonction editCategories, on à aucune idée du contexte de son lancement, donc on ne comprends pas grand chose

et pour finir tu fait un appel ajax sur php_action/chercherCategorieSelection.php dont on à peu d'idée sur la raison d'être ou même un aperçu de code...

Est-ce que ton problème ce n'est pas tout simplement d'avoir un exemple de fonctionnement Ajax entre javascrit/jQuery et php ?

**karpe** · 06/03/2018, 00h00

Mince,

Je me suis relu et j'ai même réussi à me comprendre. Du coup je vais réessayé en donnant davantage de code.

Pour commencer, je travail sur un WMS.
Je gère des outils, affichables et editables depuis la même page -> categorie.php
A la fin de ce fichier, je fais un appel à categorie.js.
Ce qui veux dire que je ne fais pas de rechargement de page.

Mon formulaire situé dans categorie.php

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
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
<div class="modal fade" id="editCategoriesModal" tabindex="-1" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
 
    	<form class="form-horizontal" id="editCategoriesForm" action="php_action/modifierCategorie.php" method="POST">
	      <div class="modal-header">
	        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
	        <h4 class="modal-title"><i class="fa fa-edit"></i> Modifier la catégorie</h4>
	      </div>
	      <div class="modal-body">
 
	      	<div id="edit-categories-messages"></div>
 
	      	<div class="modal-loading div-hide" style="width:50px; margin:auto;padding-top:50px; padding-bottom:50px;">
						<i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>
						<span class="sr-only">Loading...</span>
					</div>
 
		      <div class="edit-categories-result">
		      	<div class="form-group">
		        	<label for="editCategoriesName" class="col-sm-4 control-label">Catégorie: </label>
		        	<label class="col-sm-1 control-label">: </label>
					    <div class="col-sm-7">
					      <input type="text" class="form-control" id="editCategoriesName" placeholder="Nom de la catégorie" name="editCategoriesName" autocomplete="off">
					    </div>
		        </div> <!-- /form-group-->	
 
		      <div class="edit-categories-result">
		      	<div class="form-group">
		        	<label for="editCatId" class="col-sm-4 control-label">Catégorie: </label>
		        	<label class="col-sm-1 control-label">: </label>
					    <div class="col-sm-7">
					      <input type="text" class="form-control" id="editCatId" placeholder="Nom de la catégorie" name="editCatId" autocomplete="off">
					    </div>
		        </div> <!-- /form-group-->	
 
 
 
 
<!-- DEBUT Modifier une sous catégorie-->		 
 
<table class="table">
			  	<tbody>
			  		<?php 
                        
  
  
  
                                        $categorieId = '48'; //ID A RECUPERER VIA JS
 
                                        $affichesousCatSql = "SELECT souscategories_id, categories_id, souscategories_nom FROM souscategories WHERE categories_id = {$categorieId}";
                                                $affichesousCatResult = $connect->query($affichesousCatSql);
                
                
                                        $arrayNumber = 0;
                                        // for($x = 1; $x <= count($delivranceItemData); $x++) {
                                        $x = 1;
                                        while($affichesousCatData = $affichesousCatResult->fetch_array()) { 
                                                // print_r($delivranceItemData); ?>
			  			<tr id="row<?php echo $x; ?>" class="<?php echo $arrayNumber; ?>">	
			  				<td>
			  				<div class="form-group">
		        			<label for="editsousCategoriesName<?php echo $x; ?>" class="col-sm-4 control-label">Sous Catégorie: <?php echo $x; ?></label>
		        			<label class="col-sm-1 control-label">: </label>
					   		 <div class="col-sm-6">		  					
			  						<input type="text" name="editsousCategoriesName[]" id="editsousCategoriesName<?php echo $x; ?>" autocomplete="off" class="form-control" value="<?php echo $affichesousCatData['souscategories_nom']; ?>" />			  					
			  			 		</div>	
 
					   	<div class="col-sm-1">
			  					<button class="btn btn-default removeProductRowBtn" type="button" id="removeProductRowBtn" onclick="removeProductRow(<?php echo $x; ?>)"><i class="glyphicon glyphicon-trash"></i></button>
			  				</div>	
		        			</div> <!-- /form-group-->	
			  			</tr>
		  			<?php
                                        $arrayNumber++;
                                        $x++;
                                        } // /for
                                        ?>
			  	</tbody>			  	
  </table>
 
 
 
<!-- FIN Modifier une sous catégorie-->				  
 
 
 
		        <div class="form-group">
		        	<label for="editCategoriesStatus" class="col-sm-4 control-label">Statut: </label>
		        	<label class="col-sm-1 control-label">: </label>
					    <div class="col-sm-7">
					      <select class="form-control" id="editCategoriesStatus" name="editCategoriesStatus">
					      	<option value="">~~SELECT~~</option>
					      	<option value="1">Disponible</option>
					      	<option value="2">Indisponible</option>
					      </select>
					    </div>
		        </div> <!-- /form-group-->	 
		      </div>         	        
		      <!-- /edit brand result -->
 
	      </div> <!-- /modal-body -->
 
	      <div class="modal-footer editCategoriesFooter">
	        <button type="button" class="btn btn-default" data-dismiss="modal"> <i class="glyphicon glyphicon-remove-sign"></i> Annuler</button>
 
	        <button type="submit" class="btn btn-success" id="editCategoriesBtn" data-loading-text="Loading..." autocomplete="off"> <i class="glyphicon glyphicon-ok-sign"></i> Modifier la catégorie</button>
	      </div>
	      <!-- /modal-footer -->
     	</form>
	     <!-- /.form -->
    </div>
    <!-- /modal-content -->
  </div>
  <!-- /modal-dailog -->
</div>
<!-- /categories brand -->
 
 
 
<script src="custom/js/categories.js"></script>

Ma fonction "editCategories" va pré-remplir les champs de mon formulaire

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
// edit categories function
function editCategories(categoriesId = null) {
	if(categoriesId) {
		// remove the added categories id 
		$('#editCategoriesId').remove();
		// reset the form text
		$("#editCategoriesForm")[0].reset();
		// reset the form text-error
		$(".text-danger").remove();
		// reset the form group errro		
		$('.form-group').removeClass('has-error').removeClass('has-success');
 
		// edit categories messages
		$("#edit-categories-messages").html("");
		// modal spinner
		$('.modal-loading').removeClass('div-hide');
		// modal result
		$('.edit-categories-result').addClass('div-hide');
		//modal footer
		$(".editCategoriesFooter").addClass('div-hide');		
 
		$.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');	
				//Affichage de l'ID
				$("#editCatId").val(response.categories_id);
				// set the categories name
				$("#editCategoriesName").val(response.categories_nom);
 
 
 
 
 
				// set the categories statut
				$("#editCategoriesStatus").val(response.categories_active);
				// add the categories id 
				$(".editCategoriesFooter").after('<input type="hidden" name="editCategoriesId" id="editCategoriesId" value="'+response.categories_id+'" />');
 
 
				// submit of edit categories form
				$("#editCategoriesForm").unbind('submit').bind('submit', function() {
					var categoriesName = $("#editCategoriesName").val();
					var categoriesStatus = $("#editCategoriesStatus").val();
 
					//var valeurCatégorie = $("#editCatId").val(response.categories_id);
					//$("#editCatId").val(response.categories_id) = valeurCatégorieID;
					//var valeurCatégorieID = <?=$categorieId?>;
 
	// array validation
//			var sousCategorieName = document.getElementsByName('sousCategorieName[]');				
//			var validateProduct;
//			for (var x = 0; x < sousCategorieName.length; x++) {       			
//				var sousCategorieNameId = sousCategorieName[x].id;	    	
//		    if(sousCategorieName[x].value == ''){	    		    	
//		    	$("#"+sousCategorieNameId+"").after('<p class="text-danger"> Product Name Field is required!! </p>');
//		    	$("#"+sousCategorieNameId+"").closest('.form-group').addClass('has-error');	    		    	    	
//	      } else {      	
//		    	$("#"+sousCategorieNameId+"").closest('.form-group').addClass('has-success');	    		    		    	
//	      }          
//	   	} // for
//
//	   	for (var x = 0; x < sousCategorieName.length; x++) {       						
//		    if(sousCategorieName[x].value){	    		    		    	
//		    	validateProduct = true;
//	      } else {      	
//		    	validateProduct = false;
//	      }          
//	   	} // for     
 
 
					if(categoriesName == "") {
						$("#editCategoriesName").after('<p class="text-danger">Un nom de catégorie est requis</p>');
						$('#editCategoriesName').closest('.form-group').addClass('has-error');
					} else {
						// remov error text field
						$("#editCategoriesName").find('.text-danger').remove();
						// success out for form 
						$("#editCategoriesName").closest('.form-group').addClass('has-success');	  	
					}
 
					if(categoriesStatus == "") {
						$("#editCategoriesStatus").after('<p class="text-danger">Un statut est requis</p>');
						$('#editCategoriesStatus').closest('.form-group').addClass('has-error');
					} else {
						// remov error text field
						$("#editCategoriesStatus").find('.text-danger').remove();
						// success out for form 
						$("#editCategoriesStatus").closest('.form-group').addClass('has-success');	  	
					}
 
					if(categoriesName && categoriesStatus) {
						var form = $(this);
						// button loading
						$("#editCategoriesBtn").button('loading');
 
						$.ajax({
							url : form.attr('action'),
							type: form.attr('method'),
							data: form.serialize(),
							dataType: 'json',
							success:function(response) {
								// button loading
								$("#editCategoriesBtn").button('reset');
 
								if(response.success == true) {
									// reload the manage member table 
									manageCategoriesTable.ajax.reload(null, false);									  	  			
 
									// remove the error text
									$(".text-danger").remove();
									// remove the form error
									$('.form-group').removeClass('has-error').removeClass('has-success');
 
			  	  			$('#edit-categories-messages').html('<div class="alert alert-success">'+
			            '<button type="button" class="close" data-dismiss="alert">&times;</button>'+
			            '<strong><i class="glyphicon glyphicon-ok-sign"></i></strong> '+ response.messages +
				          '</div>');
 
			  	  			$(".alert-success").delay(500).show(10, function() {
										$(this).delay(3000).hide(10, function() {
											$(this).remove();
										});
									}); // /.alert
								}  // if
 
							} // /success
						}); // /ajax	
					} // if
 
 
					return false;
				}); // /submit of edit categories form
 
			} // /success
		}); // /fetch the selected categories data
 
	} else {
		alert('Oops!! Refresh the page');
	}
} // /edit categories function

ChercherCategorieSelection.php renseigne dans quel table taper pour récupérer les données de mes categories.

Code php :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<?php 	
 
require_once 'core.php';
 
$categoriesId = $_POST['categoriesId'];
 
 
$sql = "SELECT categories_id, categories_nom, categories_active, categories_statut FROM categories 
	
		WHERE categories_id = $categoriesId"; //	INNER JOIN souscategories ON categories.categories_id = souscategories.categories_id  
 
 
 
 
$result = $connect->query($sql);
 
if($result->num_rows > 0) { 
 $row = $result->fetch_array();
} // if num_rows
$connect->close();
 
echo json_encode($row);

Moi ce que je souhaiteensuite c'est avec l'ID de mes catégorie, pouvoir effectuer la requete qui affichera mes sous-catégorie. Sachant que j'arrive à récuperer mon affichage JS

Code :

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

$("#editCatId").val(response.categories_id);

pour l'afficher dans un input de mon fichier categorie.php (Ceci n'est qu'un test voué à devenir un "hidden" mais ça marche, j'arrive bien à le récuperer de cette manière cet identifiant de catégorie !

Code html :

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

 <input type="text" class="form-control" id="editCatId" placeholder="Nom de la catégorie" name="editCatId" autocomplete="off">

Maintenant, je voudrais récupérer cette même valeur quelques lignes en dessous dans $categorieId pour génerer mes sous categorie en fonction de l'ID de la catégorie en PHP.

Code php :

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

1
2
$categorieId = 'ICI l'ID de CATEGORIE '; //
			  		$affichesousCatSql = "SELECT souscategories_id, categories_id, souscategories_nom FROM souscategories WHERE categories_id = {$categorieId}";

Sincèrement, je n'ai pas le vocabulaire le plus technique, pourtant ma démarche est simple et je ne saurais être plus compréhensible.
Merci d'avance pour vos lumières.

**psychadelic** · 06/03/2018, 00h20

bon, sincerement, je n'y comprend rien,
mais au moins, puisqu'il 2 trois truc que j'ai pu repérer

ligne 34 sur categorie.php

changer

Code html :

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

<input type="text" class="form-control" id="editCatId" placeholder="Nom de la catégorie" name="editCatId" autocomplete="off">

en

Code html :

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

<input type="text" class="form-control" id="editCatId" data-ref="<?=$categorieId?>" placeholder="Nom de la catégorie" name="editCatId" autocomplete="off">

ensuite dans le code js qui fait l'appel ajax tu le récupère ainsi

Code javascript :

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

 var valeurCatégorie =  $('#editCatId').data('ref');

c'est ça ???

**karpe** · 06/03/2018, 13h07

Merci de ton retour.

Ok, on approche !

Comment puis-je écrire le résultat de la valeur que tu me proposes présente dans le fichier categorie.js

Code :

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

 var valeurCatégorie =  $('#editCatId').data('ref');

dans ma requête présente dans catégorie.php ?

Code php :

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

1
2
3
<?php $categorieId = 'valeur de editCatId que je souhaite afficher ici pour executer ma requete'; // 
			  		$affichesousCatSql = "SELECT souscategories_id, categories_id, souscategories_nom FROM souscategories WHERE categories_id = {$categorieId}";
						$affichesousCatResult = $connect->query($affichesousCatSql);

En gros un truc du style :

Code php :

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

1
2
3
4
5
<?php $categorieId = var valeurCatégorie //  Comment parvenir à cette écriture ???
 
 
			  		$affichesousCatSql = "SELECT souscategories_id, categories_id, souscategories_nom FROM souscategories WHERE categories_id = {$categorieId}";
						$affichesousCatResult = $connect->query($affichesousCatSql);

**psychadelic** · 06/03/2018, 14h23

ben ta requête SQL : "SELECT souscategories_id, categories_id, souscategories_nom FROM souscategories WHERE categories_id = {$categorieId}";
te renvoie un array avec souscategories_id, categories_id, souscategories_nom
que tu n'a plus qu'a injecter sur ta page php à générer... ou est le problème ?

**karpe** · 06/03/2018, 19h33

J'ai un categorie_id dans ma table catégorie.
Et un categorie_id dans ma table souscatégorie.
C'est justement en récupérant la valeur en javascript que je vais pouvoir faire une jointure avec la table souscatégorie et afficher le résultat de ma requête.

Récupérer la valeur de var valeurCatégorie pour qu'elle puisse génerer ma requête en PHP:

Code :

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

1
2
3
4
5
6
 
<?php $categorieId = var valeurCatégorie //  ICI comment remplacer var valeurCatégorie par l'identifiant de ma catégorie récupérer en javascript ?
 
 
			  		$affichesousCatSql = "SELECT souscategories_id, categories_id, souscategories_nom FROM souscategories WHERE categories_id = {$categorieId}";
						$affichesousCatResult = $connect->query($affichesousCatSql);

**psychadelic** · 06/03/2018, 19h48

comprends toujours pas.
1 et 2)T'a combien de tables quels noms ont elles ?
3 ) quelles colonnes utiles ont elles 1

4 ) qu'est-ce que tu affiche la première fois sur ta page HTML
5 ) qu'est-ce qui déclenche une mise à jours de ton affichage ?

...

**karpe** · 06/03/2018, 20h08

Ma question est toujours la même, comment récupérer une variable javascript nommé "valeurCatégorie" pour que je puisse écrire ma requête.
//Je répete, pas de rechargement de page, ce fichier est appelé à la fin de mon catégorie.php.

Categorie.php = ma structure de page
categorie.js = le fichier appelé en fin de page.php pour génerer mes résultats via Ajax dans mon fichier categorie.php
cherchercategorieSelection.php = une requête qui va aller chercher les résultats à afficher via AJAX de mes catégories. Mais ça on s'en fout puisque je les récupere TRES BIEN EN JAVASCRIPT !

Ce que je veux c'est récuperer une valeur javascript ($("#editCatId").val(response.categories_id)

que je pourrais interpreter en language PHP afin de générer la requête qui pourra m'afficher les sous-categories. juste ça.

C.A.,D -> $ CatégorieID= "Valeur que je souhaite récupérer depuis le fichier catégorie.js" -> A savoir cette valeur là ICI =>>> $("#editCatId").val(response.categories_id);
Ensuite dès que je l'ai, je pourrais executer ma requête :

$affichesousCatSql = "SELECT souscategories_id, categories_id, souscategories_nom FROM souscategories WHERE categories_id = {$categorieId}";
$affichesousCatResult = $connect->query($affichesousCatSql);

{ ...

Est-ce clair ou pas ?

**psychadelic** · 06/03/2018, 23h30

Ce que tu ne vois pas , c'est que je n'ai pas du tout envie de me plonger dans ton code et d'en chercher par moi-même les tenants et les aboutissants que tu ne veux pas me donner.
Y passer plus de 10 minutes pour comprendre de quoi il s'agit n'est pas du tout ma tasse de thé, et je ne suis pas payé pour le faire.

mais bon, comme j'ai commencé à perdre du temps pour toi, et que tu a visiblement un gros handicap à savoir expliquer simplement les choses...

voici ce que j'en comprends :

__ tu utilises au moins 2 tables SQL = categories et souscategories

___leurs colonnes utiles =
categories ==> categories_id, categories_nom, categories_active, categories_statut
souscategories ==> categories_id, souscategories_id souscategories_nom

ta page principale => le fichier "categorie.php"

Elle affiche un liste d'éléments de la table souscategories appartenant à une même categorie (= categories.categories_id)

par dessus cette affichage, se trouve mystérieusement une boite de dialogue modale permettant de choisir la catégorie à afficher.

En retour de cette boite modale tu te retrouve avec une valeur pour [ categories.categories_id ] qui est censée te permettre de changer l'ensemble de l'affichage de ta page initiale (qui est masqué par la boite modale), chose que tu veux réaliser sans avoir à recharger toute ta page.

mais c'est la que tu bloque, c'est ça ?

Donc si c'est bien cela, tu dois tout d'abord effacer toutes les lignes d'affichage
en jQuery c'est une instruction simple :
$('#idTable').empty();

Pour remplir cette table ligne par ligne en jQuery:

ligneTable = '<tr><td>.......</td></tr>'; // en y plaçant l'info utile (voir après : * requête Ajax de remplissage )
$('#idTable').append( ligneTable );

à répéter autant de fois qu'il y a de lignes...

* requête Ajax de remplissage :
en retour de ton dialogue modale tu te retrouve avec ton fameux ID de catégorie (= categories.categories_id)

Il faut alors que tu lance une nouvelle requête Ajax en mode JSON et dont les résultats sont à dispatcher comme expliqué précédemment.

sinon cette nouvelle requête Ajax peut aussi renvoyer directement du code html ( dataType : "html" ) contenant uniquement les lignes de ta table et dans ce cas
il suffit juste de mettre au niveau du résultat de requête $( "#idTable" ).html( valRetourRqAjax );

j’espère que cette fois c'est bon, sinon j'aimerai que tu présente ta question sous la même forme que cet énoncé, histoire de te faire réellement comprendre.

**Loralina** · 07/03/2018, 08h52

Bonjour,
Moi j'ai compris ceci en fait :

1) On affiche la page categorie.php.
Cette page affiche toutes les catégories et contient une boîte de dialogue initialement cachée et qui s'affichera par dessus la liste des catégories quand on voudra modifier une catégorie (sans doute en sélectionnant une action "Modifier" dans la liste des actions possibles de la catégorie souhaitée).
2) Quand on clique pour modifier une catégorie de la liste, on appelle la fonction "editCategories" avec l'ID de la catégorie sélectionnée.
3) Cette fonction envoie l'ID au fichier chercherCategorieSelection.php via un appel ajax.
4) chercherCategorieSelection.php retourne quelques informations de cette catégorie (nom, statut...).
5) On affiche ces données dans la boîte de dialogue.
6) Il s'agirait enfin d'effectuer une nouvelle requête pour afficher les sous-catégories correspondant à l'ID de cette catégorie.
On pourra alors afficher la boîte de dialogue avec toutes les données.

Or, c'est à l'étape 6) que vous êtes bloqué.
En effet :

Maintenant, je voudrais récupérer cette même valeur quelques lignes en dessous dans $categorieId pour génerer mes sous categorie en fonction de l'ID de la catégorie en PHP.

C'est là que ça devient un peu déroutant :
Il semble que vous vouliez exécuter la requête retournant les sous-catégories de la catégorie sélectionnée depuis un morceau de code php se situant dans le fichier categorie.php déjà chargé.
C'est bien ça ?
Si oui :
Cela n'est pas possible.
Actuellement, vous avez mis provisoirement la valeur 48 au niveau de ce code php :
Donc au chargement de la page categorie.php, le serveur aura généré un code html contenant les sous-catégories de la catégorie 48.
Mais la page chargée ne contient plus ce code php dynamique : il vous suffit de regarder la source chargée (ou l'inspecteur, touche F12), il n'y a plus de php.
Donc, après l'appel ajax, il n'est pas possible d'exécuter un code php de la page categorie.php chargée vu qu'il n'y en a pas.
Quand vous affichez une page du serveur, ce n'est pas comme si le navigateur était en train de lire un fichier du serveur qui continuerait de s'exécuter sur le serveur.

Pour construire ces sous-catégories, vous devez donc refaire un appel ajax à un script php qui va retourner les informations de ces sous-catégories.
Mais le plus simple, c'est de compléter chercherCategorieSelection.php en y ajoutant la requête retournant les sous-catégories et ensuite dans la réponse d'Ajax modifier le html affichant la liste des sous-catégories de la boîte de dialogue.

**karpe** · 07/03/2018, 13h26

Ouahh Loralina, c'est tout à fait ça !
Je commençais à désespéré d’être compris...

Donc je comprends que je ne peux récupérer cet ID car la page est déjà dynamiquement chargé.
Pour cela que je me demandais si :
Hypothèse 1 : il n'y avais pas quelque chose du côté des XHRHttpRequest ? Je ne maîtrise pas trop cette fonction.

Hypothèse 2 :
J'avais en amont déjà testé de joindre la table souscategorie dans ma requête d'affichage de catégorie. Mais étrangement je perdais l'affichage sans erreur apparente et je suis partie sur une autre hypothèse ...

Lorsque j’insèrai le INNER JOIN dans ma requête chercherCategorieSelection.php, elle ne s'executait plus, ...cette synthaxe me semble pourtant bonne ? non ?

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
<?php 	
 
require_once 'core.php'; 
$categoriesId = $_POST['categoriesId']; 
$sql = "SELECT categories_id, categories_nom, categories_active, categories_statut FROM categories 


	INNER JOIN souscategories ON categories.categories_id = souscategories.categories_id  


WHERE categories_id = $categoriesId";  
$result = $connect->query($sql); 
if($result->num_rows > 0) { 
 $row = $result->fetch_array();
} // if num_rows
$connect->close();
 
echo json_encode($row);

**Loralina** · 08/03/2018, 09h31

Bonjour,
XMLHttpRequest est justement une classe qu'on utilise dans le cadre de l'ajax.
Comme je disais, on peut tout faire avec l'ajax déjà existant, celui de la fonction "editCategories".

Une bonne solution :
1) Dans categorie.php, retirer le bloc listant les sous-catégories de la boîte de dialogue.
Garder juste une balise conteneur facile à cibler en js.

2) Dans chercherCategorieSelection.php, compléter pour récupérer les sous-catégories.
Si il y a une erreur dans votre requête, il faut afficher le message d'erreur.
Il faut penser à tester le fichier php directement dans le navigateur en mettant une valeur de test $categoriesId = 48;.
Pour la requête que vous vouliez faire :

Code SQL :

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

1
2
3
4
5
SELECT categories.categories_id, categories_nom, categories_active, categories_statut, souscategories_id, souscategories_nom
FROM categories
INNER JOIN souscategories
ON categories.categories_id = souscategories.categories_id
WHERE categories.categories_id = $categoriesId

Attention, la requête n'est pas protégée contre les injections, ce sera à sécuriser.

Mais moi, je ferais deux requêtes :
- Une requête sur la table "categories". On met le résultat dans la variable $row.
- Une requête sur la table "souscategories". Dans la variable $row on ajoute une clé $row['souscategories'] et on y affecte un array des résultats de cette seconde requête.

3) Dans categorie.js, il faut traiter les données reçues :
Il faudra faire une boucle pour générer le html des sous-catégories, deux possibilités :
a) Faire une chaîne du code html et l'insérer avec innerHTML (ou équivalent Jquery) dans la balise conteneur des sous-catégories.
b) Créer des éléments html et les ajouter dans l'arborescence de la balise conteneur.
La a) sera sans doute plus simple, la b) a des avantages (moins de risques d'erreur dans la syntaxe).

Récupérer un ID de table avec AJAX vers PHP

JavaScript

Discussions similaires

Partager

Partager