1 pièce(s) jointe(s)
Récupérer un ID de table avec AJAX vers PHP
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.
Pièce jointe 357149
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 $categorieId = '48'; //Récupérer cette valeur en JS
Voici ma partie complète de categorie PHP :
Code:
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">×</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:
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">×</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 !
