Untitled

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>

<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>

<title>Ajax Tests</title>
</head>
<body>
    <div class="container-fluid">
        <!-- Afficher suivi billets -->
        <h2>Billets avec suivi activé</h2>
        <table class="table table-striped">
            <thead>
                <tr>
                <th>Billet</th>
                <th>Technicien</th>
                <th>Date suivi</th>
                <th>Heure suivi</th>
                </tr>
            </thead>
            <tbody>
        <?php
        $servername = "localhost";
        $username = "root";
        $password = "";
        $dbname = "suiviBillets";

// Create connection
$conn = mysqli_connect($servername, $username, $password, $dbname);
// Check connection
if (!$conn) {
    die("Erreur de connexion: " . mysqli_connect_error());
}

$sql = "SELECT billet, technicien, date, heure FROM suiviBillets";
$result = mysqli_query($conn, $sql);

if (mysqli_num_rows($result) > 0) {
    // output data of each row
    while($row = mysqli_fetch_assoc($result)) {
        echo "<tr><td>" . $row["billet"]. "</td><td>"
            . $row["technicien"]. "</td><td>"
            . $row["date"]. "</td><td>"
            . $row["heure"]. "</td></tr>";
    }
} else {
    echo "Aucun r&eacute;sultat";
}

mysqli_close($conn);
?>
            <tbody>
        </table>
        <!-- Afficher Billets -->
        <h2>Tous les billets</h2>
        <table class="table table-striped">
            <thead>
                <tr>
                <th>Billet</th>
                <th>Client</th>
                <th>Technicien</th>
                <th>Date suivi</th>
                <th>Heure suivi</th>
                <th>Suivre</th>
                </tr>
            </thead>
            <tbody>
        <?php
        $servername = "localhost";
        $username = "root";
        $password = "";
        $dbname = "suiviBillets";

// Create connection
$conn = mysqli_connect($servername, $username, $password, $dbname);
// Check connection
if (!$conn) {
    die("Erreur de connexion: " . mysqli_connect_error());
}

$sql = "SELECT billet, nomClient, technicien FROM billets";
$result = mysqli_query($conn, $sql);

if (mysqli_num_rows($result) > 0) {
    // output data of each row
    while($row = mysqli_fetch_assoc($result)) {
        echo "<tr><td><input type="hidden" name="billet".$row["billet"]."" id="billet".$row["billet"]."" value="".$row["billet"]."">" . $row["billet"]. "</td><td>"
            . $row["nomClient"]. "</td><td><input type="hidden" value="".$row["technicien"]."">"
            . $row["technicien"].
            "</td><td><input type="text" name="date".$row["billet"]."" id="date".$row["billet"].""></td>
            <td><input type="text" name="heure".$row["billet"]."" id="heure".$row["billet"].""></td>
            <td><button type="button" class="btn btn-success btn-block" name="insert-data".$row["billet"]."" id="insert-data".$row["billet"]."">Suivre</button></td><p class="message"></p></tr>";
    }
} else {
    echo "Aucun r&eacute;sultat";
}

mysqli_close($conn);
?>
            <tbody>
        </table>
    </div>
<!-- Script pour envoi donnée via ajax -->
<script type="text/javascript">

$(document).ready(function(){
  $("#insert-data<?php echo $row["billet"]; ?>").click(function(){
    var billet=$("#billet<?php echo $row["billet"]; ?>").val();
    var technicien=$("technicien<?php echo $row["billet"]; ?>").val();
    var date=$("#date<?php echo $row["billet"]; ?>").val();
    var heure=$("#heure<?php echo $row["billet"]; ?>").val();


// AJAX code to send data to php file.
        $.ajax({
            method: "POST",
            url: "insert-data.php",
            data: {billet:billet,technicien:technicien,date:date,heure:heure},
            dataType: "JSON",
            success: function(data) {
             $(".message").html(data);
            $("p").addClass("alert alert-success");
            },
            error: function(err) {
            alert(err);
            }
        });

});
});

  </script>
</body>
</html>

<?php

$conn = new mysqli('localhost', 'root', '', 'suiviBillets');
$billet=$_POST['billet'];
$technicien=$_POST['technicien'];
$date=$_POST['date'];
$heure=$_POST['heure'];

$sql="INSERT INTO 'suiviBillets' ('billet', 'technicien', 'date', 'heure') VALUES ('$billet', '$technicien', '$date', '$heure')";
if ($conn->query($sql) === TRUE) {
    echo "data inserted";
}
else
{
    echo "failed";
}

?>