Live Table Edit with Jquery and Ajax

Live Table Edit with Jquery and Ajax

I love Jquery framework, feels that we can do awesome things. Let’s take a look at how to implement live table edit with Jquery and real time database update using Ajax. This is an interesting concept playing with DOM objects. You know that majority of readers had requested this tutorial, hope you guys like it!

Live Table Edit with Jquery and Ajax

Database
Sample database demo and  table name users :  id, first_name and last_name.

CREATE TABLE IF NOT EXISTS `users` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `first_name` varchar(70) DEFAULT NULL,
  `last_name` varchar(70) DEFAULT NULL,
  PRIMARY KEY (`id`)
)

Dumping data for table `users `

INSERT INTO `users` (`id`, `first_name`, `last_name`) VALUES
(1, 'Emmaa', 'Jones'),
(2, 'Olivia', 'Michael'),
(3, 'Isabella', ''),
(4, 'Evelyn', ''),
(5, 'John', 'Smith'),
(6, 'Mike', 'Smith');

index.php
Displaying records from users table. Take a look at above wire-frame image.

<?php
include('db.php');
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Live Table Edit</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript" src="custom.js"></script>
<link href="custom.css" rel="stylesheet">
</head>
<body bgcolor="#dedede">
<div style="margin:0 auto; width:750px; padding:10px; background-color:#fff; height:800px;">
  <h1>Live Table Edit with Jquery Demo</h1>
  Tutorial Link <a href="http://quickmysupport.com/php">Click Here</a><br />
  <br/>
  <table class="tableboard">
    <tr class="head">
      <th>First Name</th>
      <th>Last Name</th>
    </tr>
    <?php
$sql=mysql_query("select * from users");
$i=1;
while($row=mysql_fetch_array($sql))
{
$id=$row['id'];
$firstname=$row['first_name'];
$lastname=$row['last_name'];

if($i%2)
{
?>
    <tr id="<?php echo $id; ?>" class="edit_tr">
      <?php } else { ?>
    <tr id="<?php echo $id; ?>" bgcolor="#f2f2f2" class="edit_tr">
      <?php } ?>
      <td width="50%" class="edit_td"><span id="first_<?php echo $id; ?>" class="text"><?php echo $firstname; ?></span>
        <input type="text" value="<?php echo $firstname; ?>" class="editbox" id="first_input_<?php echo $id; ?>" />
      </td>
      <td width="50%" class="edit_td"><span id="last_<?php echo $id; ?>" class="text"><?php echo $lastname; ?></span>
        <input type="text" value="<?php echo $lastname; ?>"  class="editbox" id="last_input_<?php echo $id; ?>"/>
      </td>
    </tr>
    <?php
$i++;
}
?>
  </table>
</div>
</body>
</html>

Javascript Code : custom.js
Contains javascipt code. $(“.edit_tr”).click(function(){}edit_tr is the CLASS name of TR tag. Using $(this).attr(“id”) calling TR tag ID value. $(“.edit_tr”).change(function(){} sending the ajax request to table_edit_ajax.php

// JavaScript Document
$(document).ready(function()
{
$(".edit_tr").click(function()
{
var ID=$(this).attr('id');
$("#first_"+ID).hide();
$("#last_"+ID).hide();
$("#first_input_"+ID).show();
$("#last_input_"+ID).show();
}).change(function()
{
var ID=$(this).attr('id');
var first=$("#first_input_"+ID).val();
var last=$("#last_input_"+ID).val();
var dataString = 'id='+ ID +'&firstname='+first+'&lastname='+last;
$("#first_"+ID).html('<img src="load.gif" />');


if(first.length && last.length>0)
{
$.ajax({
type: "POST",
url: "table_edit_ajax.php",
data: dataString,
cache: false,
success: function(html)
{

$("#first_"+ID).html(first);
$("#last_"+ID).html(last);
}
});
}
else
{
alert('Enter something.');
}

});

$(".editbox").mouseup(function() 
{
return false
});

$(document).mouseup(function()
{
$(".editbox").hide();
$(".text").show();
});

});

CSS Code : custom.css
css for index.php

@charset "utf-8";
/* CSS Document */

body
{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:14px;
}
.editbox
{
display:none
}
td
{
padding:7px;
}
.editbox
{
font-size:14px;
width:270px;
background-color:#ffffcc;
border:solid 1px #000;
padding:4px;
}
.edit_tr:hover
{
background:url(edit.png) right no-repeat #80C8E5;
cursor:pointer;
}


th
{
font-weight:bold;
text-align:left;
padding:4px;
}
.head
{
background-color:#F51823;
color:#FFFFFF;
}
.tableboard
{
  border:#FF0000 solid 2px;
  width:100%;
}

table_edit_ajax.php
Simple PHP code, updating fullnames tables records.

<?php
include("db.php");
if($_POST['id'])
{
$id=mysql_escape_String($_POST['id']);
$firstname=mysql_escape_String($_POST['firstname']);
$lastname=mysql_escape_String($_POST['lastname']);
$sql = "update users set first_name='$firstname',last_name='$lastname' where id='$id'";
mysql_query($sql);
}
?>

db.php
PHP database configuration file

<?php
$mysql_hostname = "localhost";
$mysql_user = "root";
$mysql_password = "";
$mysql_database = "demo";
$bd = mysql_connect($mysql_hostname, $mysql_user, $mysql_password) 
or die("Opps some thing went wrong");
mysql_select_db($mysql_database, $bd) or die("Opps some thing went wrong");

?>

 

Please follow and like us:

By Rodney

I’m Rodney D Clary, a web developer. If you want to start a project and do a quick launch,I am available for freelance work.

Leave a Reply