<head>
<meta charset="utf-8"/>
<script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#table_aliments').DataTable();
resetForm();
} );
function resetForm() {
document.getElementById("id").value=""
document.getElementById("aliment").value = "";
document.getElementById("cat").value = "";
document.getElementById("submit_button").value="Ajouter";
};
</script>
<script type="text/javascript">
$(document).ready( function() {
$.getJSON('https://eden.imt-lille-douai.fr/~charlotte.raulin/Projet/api/afficher_aliments.php',
function(json){
table = $('#tbody_aliment');
table.html('');
// cf. https://api.jquery.com/jQuery.getJSON/
$.each( json, function( key, val ) {
// table.append('<tr><td>'+val[0]+'</td><td>'+val[1]+'</td><td>'+val[2]+'</td><td><button '+
// 'onclick="onEdit('+val[0]+',\''+val[1]+'\',\''+val[2]+'\')">Modifier</button></td></tr>');
table.append('<tr><td>'+val[0]+'</td><td>'+val[1]+'</td><td>'+val[2]+'</td><td><button '+
'onclick="onEdit('+val[0]+',\''+val[1]+'\',\''+val[2]+'\')">Modifier</button></td><td><button '+
'onclick="onDelete('+val[0]+')">Supprimer</button></td></tr>');
});
}
);
});
function onEdit(id, nom, type) {
document.getElementById("id").value = id;
document.getElementById("aliment").value = nom;
document.getElementById("cat").value = type;
document.getElementById("submit_button").value='Modifier';
};
function onDelete(id){
var varID= id;
$.ajax({
url: 'api/delete_aliment.php',
type: 'POST',
data: {'varID' : varID},
success: function(varID) {
alert(varID); // reponse contient l'affichage du fichier PHP (soit echo)
}
});
location.reload();
}
</script>
</head>
<section id="aliments_contenu" style="display : flex; flex-direction : row; ">
<div style="margin-right:100px">
<table id="table_aliments" class="dataTable" style="color : #212529; ">
<thead>
<tr>
<th>ID</th>
<th>Aliment</th>
<th>Type</th>
<th>Modifier</th>
<th>Supprimer</th>
<th>Ajouter au Journal </th>
</tr>
</thead>
<tbody id="tbody_aliment"><tbody>
</table>
</div>
<div>
<table>
<tr>
<td>
<form id="form_aliment" action="api/ajouter_aliment.php" method="POST" >
<div>
<input type="text" id="id" name="id" style="display : none">
</div>
<div>
<label>Aliment</label>
<input type="text" id="aliment" name="aliment" required>
</div>
<div>
<label>Type d'aliment </label>
<input type="text" id="cat" name="cat" required>
<!-- <select id="type" size="1">
<option value="fruit"> Fruit </option>
<option value="legume"> Legume </option>
</select> -->
</div>
<div class="form-action-buttons">
<input type="submit" value="Ajouter" id='submit_button'>
</div>
</form>
</td>
</tr>
</table>
</div>
</section>