AJAX Add Edit Delete Records in Database using PHP and jQuery

We have form controls to enter user data and trigger AJAX event to perform database action. This code initially displays list of records from database table. It also has an add form to enter new record via AJAX. 

first create index.php file

<style>
body{width:40%;}
.message-box{margin-bottom:20px;border-top:#F0F0F0 2px solid;background:#FAF8F8;padding:10px;}
.btnEditAction{background-color:#2FC332;border:0;padding:2px 10px;color:#FFF;}
.btnDeleteAction{background-color:#D60202;border:0;padding:2px 10px;color:#FFF;margin-bottom:15px;}
#btnAddAction{background-color:#09F;border:0;padding:5px 10px;color:#FFF;}
</style>
<?php
require_once("dbcontroller.php");
$db_handle = new DBController();
$comments = $db_handle->runQuery("SELECT * FROM comment");
?>
<script src="https://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script>
<script src="crud.js"></script>

<div class="form_style">
<div id="comment-list-box">
<?php
if(!empty($comments)) {
foreach($comments as $k=>$v) {
?>
<div class="message-box" id="message_<?php echo $comments[$k]["id"];?>">
<div>
<button class="btnEditAction" name="edit" onClick="showEditBox(<?php echo $comments[$k]["id"]; ?>)">Edit</button>
<button class="btnDeleteAction" name="delete" onClick="callCrudAction('delete',<?php echo $comments[$k]["id"]; ?>)">Delete</button>
</div>
<div class="message-content"><?php echo $comments[$k]["message"]; ?></div>
</div>
<?php
}
} ?>
</div>

<div id="frmAdd"><textarea name="txtmessage" id="txtmessage" cols="80" rows="5"></textarea>
<p><button id="btnAddAction" name="submit" onClick="callCrudAction('add','')">Add</button></p>
</div>
<img src="LoaderIcon.gif" id="loaderIcon" style="display:none" />
</div>

now  we  will create second  file  crud.js file

#message_" + id + " .message-content").html(message);
    $('#frmAdd').show();
}
function callCrudAction(action,id) {
    $("#loaderIcon").show();
    var qufunction showEditBox(id) {
    $('#frmAdd').hide();
    var currentMessage = $("#message_" + id + " .message-content").html();
    var editMarkUp = '<textarea rows="5" cols="80" id="txtmessage_'+id+'">'+currentMessage+'</textarea><button name="ok" onClick="callCrudAction(\'edit\','+id+')">Save</button><button name="cancel" onClick="cancelEdit(\''+currentMessage+'\','+id+')">Cancel</button>';
    $("#message_" + id + " .message-content").html(editMarkUp);
}
function cancelEdit(message,id) {
    $("eryString;
    switch(action) {
        case "add":
            queryString = 'action='+action+'&txtmessage='+ $("#txtmessage").val();
        break;
        case "edit":
            queryString = 'action='+action+'&message_id='+ id + '&txtmessage='+ $("#txtmessage_"+id).val();
        break;
        case "delete":
            queryString = 'action='+action+'&message_id='+ id;
        break;
    }   
    jQuery.ajax({
    url: "crud_action.php",
    data:queryString,
    type: "POST",
    success:function(data){
        switch(action) {
            case "add":
                $("#comment-list-box").append(data);
            break;
            case "edit":
                $("#message_" + id + " .message-content").html(data);
                $('#frmAdd').show();
            break;
            case "delete":
                $('#message_'+id).fadeOut();
            break;
        }
        $("#txtmessage").val('');
        $("#loaderIcon").hide();
    },
    error:function (){}
    });
}

third create  file crud_action.php file

<?php
require_once("dbcontroller.php");
$db_handle = new DBController();

$action = $_POST["action"];
if(!empty($action)) {
    switch($action) {
        case "add":
            $result = mysql_query("INSERT INTO comment(message) VALUES('".$_POST["txtmessage"]."')");
            if($result){
                  $insert_id = mysql_insert_id();
                  echo '<div class="message-box"  id="message_' . $insert_id . '">
                        <div>
                        <button class="btnEditAction" name="edit" onClick="showEditBox(' . $insert_id . ')">Edit</button>
<button class="btnDeleteAction" name="delete" onClick="callCrudAction(\'delete\',' . $insert_id . ')">Delete</button>
                        </div>
                        <div class="message-content">' . $_POST["txtmessage"] . '</div></div>';
            }
            break;
           
        case "edit":
            $result = mysql_query("UPDATE comment set message = '".$_POST["txtmessage"]."' WHERE  id=".$_POST["message_id"]);
            if($result){
                  echo $_POST["txtmessage"];
            }
            break;           
       
        case "delete":
            if(!empty($_POST["message_id"])) {
                mysql_query("DELETE FROM comment WHERE id=".$_POST["message_id"]);
            }
            break;
    }
}
?>

now  we  will create third file dbcontroller.php

<?php
class DBController {
    private $host = "localhost";
    private $user = "root";
    private $password = "";
    private $database = "phppot_examples";
   
    function __construct() {
        $conn = $this->connectDB();
        if(!empty($conn)) {
            $this->selectDB($conn);
        }
    }
   
    function connectDB() {
        $conn = mysql_connect($this->host,$this->user,$this->password);
        return $conn;
    }
   
    function selectDB($conn) {
        mysql_select_db($this->database,$conn);
    }
   
    function runQuery($query) {
        $result = mysql_query($query);
        while($row=mysql_fetch_assoc($result)) {
            $resultset[] = $row;
        }       
        if(!empty($resultset))
            return $resultset;
    }
   
    function numRows($query) {
        $result  = mysql_query($query);
        $rowcount = mysql_num_rows($result);
        return $rowcount;   
    }
}
?>

loading image