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 : 2385
Taille : 111,1 Ko

Nom : Capture du 2018-03-05 13-27-35.png
Affichages : 2385
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

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

JavaScript

Vue hybride

Discussions similaires

Partager

Partager