I have been searching and found some code wich I have changed the connection and vars of the db. Now with these changes I can only add rows in the db. Both delete and edit aren't working, and I don't understand why, because there are no errors.
Index.php
<html>
<head>
<title>Live Table Data Edit</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
</head>
<body>
<div class="container">
<br />
<br />
<br />
<div class="table-responsive">
<h3 align="center">Table</h3><br />
<div id="live_data"></div>
</div>
</div>
</body>
</html>
<script>
$(document).ready(function(){
function fetch_data()
{
$.ajax({
url:"select.php",
method:"POST",
success:function(data){
$('#live_data').html(data);
}
});
}
fetch_data();
$(document).on('click', '#btn_add', function(){
var nome = $('#nome').text();
var preco = $('#preco').text();
if(nome == '')
{
alert("Enter Nome");
return false;
}
if(preco == '')
{
alert("Enter Preco");
return false;
}
$.ajax({
url:"insert.php",
method:"POST",
data:{nome:nome, preco:preco},
dataType:"text",
success:function(data)
{
alert(data);
fetch_data();
}
})
});
function edit_data(ref, text, column_name)
{
$.ajax({
url:"edit.php",
method:"POST",
data:{id:id, text:text, column_name:column_name},
dataType:"text",
success:function(data){
alert(data);
}
});
}
$(document).on('blur', '.nome', function(){
var ref = $(this).data("ref1");
var nome = $(this).text();
edit_data(ref, nome, "nome");
});
$(document).on('blur', '.preco', function(){
var ref = $(this).data("ref2");
var preco = $(this).text();
edit_data(ref,preco, "preco");
});
$(document).on('click', '.btn_delete', function(){
var ref=$(this).data("ref3");
if(confirm("Are you sure you want to delete this?"))
{
$.ajax({
url:"delete.php",
method:"POST",
data:{id:id},
dataType:"text",
success:function(data){
alert(data);
fetch_data();
}
});
}
});
});
</script>
Select.php (here I creat the table and make it editable)
<?php
$connect = mysqli_connect("localhost", "root", "", "crc");
$output = '';
$sql = "SELECT * FROM perfumesh ORDER BY ref ASC";
$result = mysqli_query($connect, $sql);
$output .= '
<div class="table-responsive">
<table class="table table-bordered">
<tr>
<th width="10%">REF</th>
<th width="40%">Nome</th>
<th width="40%">Preco</th>
<th width="10%">Delete</th>
</tr>';
if(mysqli_num_rows($result) > 0)
{
while($row = mysqli_fetch_array($result))
{
$output .= '
<tr>
<td>'.$row["ref"].'</td>
<td class="nome" data-ref1="'.$row["ref"].'" contenteditable>'.$row["nome"].'</td>
<td class="preco" data-ref2="'.$row["ref"].'" contenteditable>'.$row["preco"].'</td>
<td><button type="button" name="delete_btn" data-ref3="'.$row["ref"].'" class="btn btn-xs btn-danger btn_delete">x</button></td>
</tr>
';
}
$output .= '
<tr>
<td></td>
<td id="nome" contenteditable></td>
<td id="preco" contenteditable></td>
<td><button type="button" name="btn_add" id="btn_add" class="btn btn-xs btn-success">+</button></td>
</tr>
';
}
else
{
$output .= '<tr>
<td colspan="4">Data not Found</td>
</tr>';
}
$output .= '</table>
</div>';
echo $output;
?>
Edit.php
<?php
$connect = mysqli_connect("localhost", "root", "", "crc");
$ref = $_POST["ref"];
$text = $_POST["text"];
$column_name = $_POST["column_name"];
$sql = "UPDATE perfumesh SET ".$column_name."='".$text."' WHERE ref='".$ref."'";
if(mysqli_query($connect, $sql))
{
echo 'Data Updated';
}
?>
Delete.php
<?php
$connect = mysqli_connect("localhost", "root", "", "crc");
$sql = "DELETE FROM perfumesh WHERE ref = '".$_POST["ref"]."'";
if(mysqli_query($connect, $sql))
{
echo 'Data Deleted';
}
?>
Original code: http://webslesson.blogspot.pt/2016/02/live-table-add-edit-delete-using-ajax-jquery-in-php-mysql.html
