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`
--

CREATE TABLE IF NOT EXISTS `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`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=7 ;

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


<?php 
include"dbclass.php";
$db = new db();
?>
<!DOCTYPE html>
<html lang="en">
<head>
  <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="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/css/bootstrap-editable.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/js/bootstrap-editable.min.js"></script>

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

  
</head>
<body>

<div class="container">   
<h1>Live table edit with jquery and ajax</h1>    
  <table class="table">
    <thead>
      <tr>
        <th style = "width:45%" >Language</th>
        <th style = "width:55%" >Definition</th>
      </tr>
    </thead>
    <tbody class="row_position" >
    <?php 
     $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>
      </tr>
     <?php } ?>
    </tbody>
  </table>
</div>


</body>
</html>

create ajax.php


<?php 
include"dbclass.php";
$db = new db();
$value     = $_POST['value'];
$col_id    = $_POST['col_id'];
$col_name  = $_POST['col_name'];

    $data = array(
        $col_name=>$value
    );
    
    $edit = $db->update("position",$data,"where position_id='".$col_id ."'");
    if(empty($db->geterror())){
        echo true;
    }
    else{
        echo false;
    }

?>

 

smileysmileysmileysmiley

Download Here

Total Coments (0)