For my final project, i'm trying to make my html tables editable by users, with updating data in MySQL. I've found in web a few js scripts for such case but no one works as needed. My result - editable table with correct data, but new entered data are not saved in the sql table. What I'm missing?
Data for table:
require("../includes/config.php");
$doctors = CS50::query("SELECT id, name, mob, hours FROM doctors");
render("doctors_form.php", ["title" => "Doctors", "doctors" => $doctors]);
This is "saveInlineEdit" script I've used
<script>
function saveInlineEdit(editableObj,column,id) {
// no change change made then return false
if($(editableObj).attr('data-old_value') === editableObj.innerHTML)
return false;
// send ajax to update value
$(editableObj).css("background","#FFF url(loader.gif) no-repeat right");
$.ajax({
url: "saveInlineEdit.php",
cache: false,
data:'column='+column+'&value='+editableObj.innerHTML+'&id='+id,
success: function(response) {
console.log(response);
// set updated value as old value
$(editableObj).attr('data-old_value',editableObj.innerHTML);
$(editableObj).css("background","#FDFDFD");
}
});
}
</script>
This is html table (js script is in this file on the top):
<table>
<tr>
<th>Name</th>
<th>Mob</th>
<th>Hours</th>
</tr>
<?php foreach ($doctors as $doctors): ?>
<tr>
<td contenteditable="true" data-old_value="<?= $doctors["name"]?>"
onBlur="saveInlineEdit(this,'name','<?=$doctors["id"]?>')"><?=$doctors["name"]?></td>
<td contenteditable="true" data-old_value="<?= $doctors["mob"]?>"
onBlur="saveInlineEdit(this,'mob','<?=$doctors["id"]?>')"><?=$doctors["mob"]?></td>
<td contenteditable="true" data-old_value="<?= $doctors["hours"]?>"
onBlur="saveInlineEdit(this,'hours','<?= $doctors["id"]?>')"><?=$doctors["hours"]?></td>
</tr>
<?php endforeach ?>
</table>
And this is php file to update data:
<?php
require("../includes/config.php");
CS50::("UPDATE doctors SET ".$_REQUEST["column"]."='".$_REQUEST["value"]."' WHERE id='".$_REQUEST["id"]."'");
echo "saved";
?>
Thanks for help!