Discussion :

[karpe]

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.



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 !