Skip to main content
Bumped by Community user
Bumped by Community user
Bumped by Community user
Bumped by Community user
Bumped by Community user
Bumped by Community user
Bumped by Community user
Bumped by Community user
added 18 characters in body
Source Link

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?

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, but new entered data are not saved in the sql table. What I'm missing?

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?

Source Link

Editable html table (PHP, MySQL) - doesn't save changes in database

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, 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!

1
2