article

Sunday, April 18, 2021

Live Editable Table using Jquery Ajax PHP and Mysqli

Live Editable Table using Jquery Ajax PHP and Mysqli

CREATE TABLE `users` (
  `id` int(11) NOT NULL,
  `username` varchar(255) NOT NULL,
  `name` varchar(255) NOT NULL
) ENGINE=MyISAM DEFAULT CHARSET=latin1;

INSERT INTO `users` (`id`, `username`, `name`) VALUES
(8, 'Batosai23', 'Batosai Ednalan'),
(9, 'caite', 'Caite Ednalan'),
(11, 'NarutoUzumaki', 'Naruto Uzumaki'),
(12, 'SasukeUchiha', 'Sasuke Uchiha');

ALTER TABLE `users`
  ADD PRIMARY KEY (`id`);

ALTER TABLE `users`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=21;


index.php
//index.php
<!doctype html>
<html>
<head>
<title>Live Editable Table using Jquery Ajax PHP and Mysqli</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />	
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type='text/javascript'>
$(document).ready(function(){
 
 // Show Input element
 $('.edit').click(function(){
  $('.txtedit').hide();
  $(this).next('.txtedit').show().focus();
  $(this).hide();
 });

 // Save data
 $(".txtedit").focusout(function(){
  
  // Get edit id, field name and value
  var id = this.id;
  var split_id = id.split("_");
  var field_name = split_id[0];
  var edit_id = split_id[1];
  var value = $(this).val();
  
  // Hide Input element
  $(this).hide();

  // Hide and Change Text of the container with input elmeent
  $(this).prev('.edit').show();
  $(this).prev('.edit').text(value);

  $.ajax({
   url: 'update.php',
   type: 'post',
   data: { field:field_name, value:value, id:edit_id },
   success:function(response){
      if(response == 1){ 
         console.log('Save successfully'); 
      }else{ 
         console.log("Not saved.");  
      }
   }
  });
 
 });

});
</script>
</head>
<body >
<div class="container" >
    <div class="row" style="padding:50px;">
		<p><h1>Live Editable Table using Jquery Ajax PHP and Mysqli</h1></p>
		<table width='100%' border='0'>
		 <tr>
		  <th width='10%'>No</th>
		  <th width='40%'>Username</th>
		  <th width='40%'>Name</th>
		 </tr>
		 <?php 
		 include('dbcon.php');
		 $count = 1;
		 $query = $conn->query("SELECT * FROM users order by id");
		 while ($row = $query ->fetch_object()) {
		  $id = $row->id;
		  $username = $row->username;
		  $name = $row->name;
		 ?>
		 <tr>
		  <td><?php echo $count; ?></td>
		  <td> 
			<div class='edit' > <?php echo $username; ?></div> 
			<input type='text' class='txtedit' value='<?php echo $username; ?>' id='username_<?php echo $id; ?>' >
		  </td>
		  <td> 
		   <div class='edit' ><?php echo $name; ?> </div> 
		   <input type='text' class='txtedit' value='<?php echo $name; ?>' id='name_<?php echo $id; ?>' >
		  </td>
		 </tr>
		 <?php
		 $count ++;
		 }
		 ?> 
		</table>
   </div>
</div>
<style>
.edit{
 width: 100%;
 height: 25px;
}
.editMode{
 border: 1px solid black;
}
table {
 border:3px solid lavender;
 border-radius:3px;
}
table tr:nth-child(1){
 background-color:dodgerblue;
}
table tr:nth-child(1) th{
 color:white;
 padding:10px 0px;
 letter-spacing: 1px;
}
table td{
 padding:10px;
}
table tr:nth-child(even){
 background-color:lavender;
 color:black;
}
.txtedit{
 display: none;
 width: 99%;
 height: 30px;
}
</style>
</body>
</html>
update.php
//update.php
<?php
include('dbcon.php');
if(isset($_POST['field']) && isset($_POST['value']) && isset($_POST['id'])){
   $field = $_POST['field'];
   $value = $_POST['value'];
   $editid = $_POST['id'];

	$sql = "UPDATE users SET ".$field."='".$value."' WHERE id = $editid"; 
    $update = $conn->query($sql); 

   echo 1;
}else{
   echo 0;
}
exit;
?>
dbcon.php
//dbcon.php
<?php
$conn = new mysqli('localhost','root','','testingdb');
if ($conn->connect_error) {
    die('Error : ('. $conn->connect_errno .') '. $conn->connect_error);
}
?>

Related Post