Live table edit with jquery and ajax

Live table edit with jquery and ajax

Live table edit with jquery and ajax :-

 In this post you learn how to Live table edit with jquery and ajax using php aand my sql.

This is done in fiew simple stap :- 

create data base phpcooker_script and import this 

-- Database: `phpcooker_script`

-- --------------------------------------------------------

-- Table structure for table `position`

  `position_id` int(10) NOT NULL AUTO_INCREMENT,
  `position_title` varchar(120) NOT NULL,
  `position_description` text NOT NULL,
  `position_status` enum('0','1') NOT NULL,
  PRIMARY KEY (`position_id`)

-- Dumping data for table `position`

INSERT INTO `position` (`position_id`, `position_title`, `position_description`, `position_status`) VALUES
(1, 'What is PHP', 'is a widely-used open source general-purpose scripting language that is especially suited for web development and can be embedded into HTML', '1'),
(2, 'What is C ', 'C is a computer programming language. That means that you can use C to create lists of instructions for a computer to follow', '1'),
(3, 'What is c++ ', 'C++ is a general-purpose object-oriented programming (OOP) language, developed by Bjarne Stroustrup, and is an extension of the C language', '1'),
(4, 'What is java ', 'Java is a programming language and computing platform first released by Sun Microsystems in 1995.', '1'),
(5, 'What is javascript gffgfg', 'Javascript is a dynamic computer programming language. It is lightweight and most commonly used', '1'),
(6, 'What is HTML ', 'HTML is the standard markup language for creating Web pages.', '1');

create index.php

$db = new db();
<!DOCTYPE html>
<html lang="en">
  <title>Live table edit with jquery and ajax</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="">
  <script src=""></script>
  <script src=""></script>
<link href="//" rel="stylesheet"/>
<script src="//"></script>

  $(function() {
    $.fn.editable.defaults.mode = 'inline';
            var col_id    = $('.editable-open').attr('col_id');
            var col_name  = $('.editable-open').attr('col_name');
            var value     = $('.input-sm').val();
                url: "ajax.php",
                type: 'post',
                success: function(result){
                    if(result == true){
                        alert('Your Update save successfully');
                    alert('Some Error occured please try agen !');


<div class="container">   
<h1>Live table edit with jquery and ajax</h1>    
  <table class="table">
        <th style = "width:45%" >Language</th>
        <th style = "width:55%" >Definition</th>
    <tbody class="row_position" >
     $data_lists = $db->select('position');
     foreach($data_lists as $data_list){
      <tr  >
        <td class="inlineedit" col_name="position_title" col_id="<?php echo $data_list['position_id']; ?>" ><?php echo $data_list['position_title']; ?></td>
        <td class="inlineedit" col_name="position_description" col_id="<?php echo $data_list['position_id']; ?>" ><?php echo $data_list['position_description']; ?></td>
     <?php } ?>


create ajax.php

$db = new db();
$value     = $_POST['value'];
$col_id    = $_POST['col_id'];
$col_name  = $_POST['col_name'];

    $data = array(
    $edit = $db->update("position",$data,"where position_id='".$col_id ."'");
        echo true;
        echo false;




Download Here

Total Coments (0)