Hi I am developing a project locally and started from this https://codepen.io/fjfalah/pen/WEppVa to create my table linked to my mysql database. I have had no problems in displaying the data but I am experiencing problems in updating the data. Once I edit and update the table I display the message “Record successfully updated” but it doesn’t actually update anything and I don’t have any error messages in both console and logs. I am trying to update only two columns but actually all of them will have to be modified. I will share the code with you, thanks for any suggestions.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Admin</title>
<!-- Bootstrap 5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
<link rel="stylesheet" href="style/style.css">
<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://markcell.github.io/jquery-tabledit/assets/js/tabledit.min.js"></script>
</head>
<body>
<div class="main">
<div class="title-container">
<h1>Aggiornamento Prezzi</h1>
<h2> <?= $user_name ?></h2>
</div>
<div class="users-container">
<h2></h2>
<div class="table-responsive">
<div class="position-relative content">
<div class="position-absolute w-100 row" style="z-index: 50;">
<div class="col-6">
<div class="filter-wrapper">
<input type="radio" class="filter-checkbox" name="filter" data-filter="" value="Tutto" checked="checked" />
Tutto
<input type="radio" class="filter-checkbox" name="filter" data-filter="Antintrusione" value="Antintrusione" />
Antintrusione
<input type="radio" class="filter-checkbox" name="filter" data-filter="Antincendio" value="Antincendio" />
Antincendio
</div>
</div>
</div>
</div>
<br>
<table id="sample_data" class="table table-hover">
<thead>
<tr>
<th scope="col"> Prodotti ID</th>
<th scope="col">Nome Prodotto</th>
<th scope="col">Gamma</th>
<th scope="col">Alfanumerico</th>
<th scope="col">Descrizione</th>
<th scope="col">Assorbimento</th>
<th scope="col">Icona 1</th>
<th scope="col">Icona 2</th>
<th scope="col">Icona 3</th>
<th scope="col">Icona 4</th>
<th scope="col">Icona 5</th>
<th scope="col">Immagine</th>
<th scope="col">Garanzia</th>
<th scope="col">Riparazione</th>
<th scope="col">Costo Acquisto</th>
<th scope="col">Prezzo Vendita</th>
<th scope="col">Stato</th>
</tr>
</thead>
<tbody>
<?php
$var = @$_POST['ProdottiID'] ;
$stmt = $conn->prepare("SELECT * FROM `prodotti`");
$stmt->execute();
$result = $stmt->fetchAll();
foreach ($result as $row) {
$ProdottiID = $row['ProdottiID'];
$NomeProdotto = $row['NomeProdotto'];
$Gamma = $row['Gamma'];
$Alfanumerico = $row['Alfanumerico'];
$Descrizione = $row['Descrizione'];
$Assorbimento = $row['Assorbimento'];
$Icona1 = $row['Icona1'];
$Icona2 = $row['Icona2'];
$Icona3 = $row['Icona3'];
$Icona4 = $row['Icona4'];
$Icona5 = $row['Icona5'];
$Immagine = $row['Immagine'];
$Garanzia = $row['Garanzia'];
$Riparazione = $row['Riparazione'];
$CostoAcquisto = $row['CostoAcquisto'];
$PrezzoVendita = $row['PrezzoVendita'];
$Stato = $row['Stato'];
?>
<tr>
<td id="ProdottiID" scope="col"><span class="value"><?= $ProdottiID ?></span><div></div></td>
<td id="NomeProdotto" scope="col"><span class="value"><?= $NomeProdotto ?></span><div></div></td>
<td scope="col"><span class="value"><?= $Gamma ?></span><div></div></td>
<td id="Alfanumerico" scope="col"><span class="value"><?= $Alfanumerico ?></span><div></div></td>
<td scope="col"><span class="value"><?= $Descrizione ?></span><div></div></td>
<td scope="col"><span class="value"><?= $Assorbimento ?></span><div></div></td>
<td scope="col"><span class="value"><?= $Icona1 ?></span><div></div></td>
<td scope="col"><span class="value"><?= $Icona2 ?></span><div></div></td>
<td scope="col"><span class="value"><?= $Icona3 ?></span><div></div></td>
<td scope="col"><span class="value"><?= $Icona4 ?></span><div></div></td>
<td scope="col"><span class="value"><?= $Icona5 ?></span><div></div></td>
<td scope="col"><span class="value"><?= $Immagine ?></span><div></div></td>
<td scope="col"><span class="value"><?= $Garanzia ?></span><div></div></td>
<td scope="col"><span class="value"><?= $Riparazione ?></span><div></div></td>
<td scope="col"><span class="value"><?= $CostoAcquisto ?></span><div></div></td>
<td scope="col"><span class="value"><?= $PrezzoVendita ?></span><div></div></td>
<td scope="col"><span class="value"><?= $Stato ?></span><div></div></td>
</tr>
<?php
}
?>
</tbody>
</table>
</div>
</div>
</div>
<script>
$('table tbody').on('dblclick', 'td', function(){
var valCell = $(this).find('span').text();
$(this).find('span').hide();
$(this).find('div').show().html('
<div class="input-group">
<input type="text" class="form-control" value="'+valCell+'">
<span class="input-group-btn">
<button id="save" class="btn btn-default" type="button"><i class="bi bi-check2"></i></button>
<button id="close" class="btn btn-default" type="button"><i class="bi bi-x-circle"></i></button>
</span>
</div>');
$(this).find('input').focus();
$(this).closest('tbody').find('td').not($(this)).each(function(){
$(this).find('span').show();
$(this).find('div').hide();
});
});
$('table').on('click','#close',function(){
$(this).closest('td').find('span.value').show();
$(this).closest('div').hide();
});
$('table').on('click','#close',function(){
$(this).closest('td').find('span.value').show();
$(this).closest('div').hide();
});
$('table').on('click','#save', function(){
var getValueInput = $(this).closest('div').find('input').val();
$(this).closest('td').find('span.value').text(getValueInput);
$(this).closest('td').find('span.value').show();
$(this).closest('div').hide();
jQuery.ajax({
url: "conn/action2.php",
method: "POST",
data: {ProdottiID: $('#ProdottiID').val(), NomeProdotto: $('#NomeProdotto').val(), Alfanumerico: $('#Alfanumerico').val()},
cache: false,
success: function(response)
{
alert("Record successfully updated");
}
});
});
</script>
</body>
</html>
This is the php file for updating the database
<?php
//action2.php
$NomeProdotto = $_POST['NomeProdotto'];
$Alfanumerico = $_POST['Alfanumerico'];
$ProdottiID = $_POST['ProdottiID'];
//You need create a database connection
$dbhost = 'localhost';
$dbuser = '11111';
$dbpass = '22222';
$conn = mysqli_connect($dbhost, $dbuser, $dbpass, "lslistini2");
if(! $conn ){
die('Could not connect: ' . mysqli_error());
}
$retval = mysqli_query($conn,"UPDATE prodotti SET ProdottiID = '$ProdottiID', NomeProdotto = '$NomeProdotto', Alfanumerico = '$Alfanumerico' WHERE ProdottiID = '$ProdottiID'");
if(! $retval ) {
die('Could not update data: ' . mysqli_error());
}
echo "Updated data successfullyn";
mysqli_close($conn);
?>
Thanks again for your help