aliments.php

<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("calories").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/read_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>'+val[3]+'</td><td><button '+
                                'onclick="onEdit('+val[0]+',\''+val[1]+'\',\''+val[2]+'\',\''+val[3]+'\')">Modifier</button></td><td><button '+
                                'onclick="onDelete('+val[0]+')">Supprimer</button></td></tr>');
                        });
                    }
                );
            });

            function onEdit(id, nom, cal, type) {
                document.getElementById("id").value = id;
                document.getElementById("aliment").value = nom;
                document.getElementById("calories").value = cal;
                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>Calories (KCal)</th>
                <th>Type</th>
                <th>Modifier</th>
                <th>Supprimer</th>
            </tr>
        </thead>
        <tbody id="tbody_aliment"><tbody>

        </table>
</div>

<div>
    <table>
            <tr>
                <td>
                    <form id="form_aliment" action="api/create_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>Calories (KCal)</label>
                            <input type="number"  id="calories" name="calories" required>
                        </div>

                        <div>
                            <label>Type d'aliment </label>
                            <!-- <input type="text"  id="cat" name="cat" required> -->
                            <select id="cat" name="cat" size="1">
                                <option value="Fruit"> Fruit </option>
                                <option value="Legume"> Legume </option>
                                <option value="Feculent"> Feculent </option>
                                <option value="Laitage"> Legume </option>
                                <option value="Sucrerie"> Sucrerie </option>
                            </select>

                        </div>
                        <div  class="form-action-buttons">
                            <input type="submit" value="Ajouter" id='submit_button'>
                            
                        </div>
                    </form>
                </td>
            </tr>
    </table>
</div>
</section>