Live Table Edit with Jquery and Ajax

Today I am going to represent how to live table edit using Real time Jquery and Ajax hope you guys like it!..It is important to make your admin panel for website attractive

Live_Table_Edit




Download

Database

Sample database fullnames table columns id, firstname and lastname.

CREATE TABLE fullnames
(
id INT PRIMARY KEY AUTO_INCREMENT,
firstname VARCHAR(70),
lastname VARCHAR(70)
);
Table Live Edit
Table Edit Live

TableEdit.php

Displaying records from fullnames table. Take a look at above wire-frame image.

<table>
<?php
include(‘db.php’);
$sql=mysql_query(“select * from fullnames”);
while($row=mysql_fetch_array($sql))
{
$id=$row[‘id’];
$firstname=$row[‘firstname’];
$lastname=$row[‘lastname’];
?>
<tr id=”<?php echo $id; ?>” class=”edit_tr”>

<td 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; ?>” /&gt;
</td>

<td 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
}
?>
</table>

 

Javascript Code

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

 

<script type=”text/javascript” src=”http://ajax.googleapis.com/
ajax/libs/jquery/1.5/jquery.min.js“></script>
<script type=”text/javascript”>
$(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” />’); // Loading imageif(first.length>0&& 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.’);
}});

// Edit input box click action
$(“.editbox”).mouseup(function()
{
return false
});

// Outside click action
$(document).mouseup(function()
{
$(“.editbox”).hide();
$(“.text”).show();
});

});
</script>

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 fullnames set firstname=’$firstname‘,lastname=’$lastname‘ where id=’$id“;
mysql_query($sql);
}
?>

db.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 fullnames set firstname=’$firstname‘,lastname=’$lastname‘ where id=’$id“;
mysql_query($sql);
}
?>

CSS Code

 

Styles for TableEdit.php

body
{
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
}
.editbox
{
display:none
}
td
{
padding:5px;
}
.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;
}

Be First to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *

*

code