9lessons programming blog
Loading Search
9lessons Bring Friends
Wall Script
Follow Me:
Tuesday, March 22, 2011

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

Download Script     Live Demo

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


Live table edit with jquery

TableEdit.php
Displaying records from fullnames table. Take a look at above wire-frame image.
//Table Records
<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 image

if(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
PHP database configuration file
<?php

$mysql_hostname = "Host name";
$mysql_user = "UserName";
$mysql_password = "Password";
$mysql_database = "Database Name";
$bd = mysql_connect($mysql_hostname, $mysql_user, $mysql_password) or die("Could not connect database");
mysql_select_db($mysql_database, $bd) or die("Could not select database");
?>

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;
}
Comments
{ 112 comments }
Anonymous said...

Exellent


Ariel Macintosh™

Anonymous said...

Hey nice tutorial....

monk said...

thanks a lot mate , thats what i was searching

Anonymous said...

Hey nice tutorial.... keep posting... All the best

nidzonni said...

Great !! Good thing would be data/cell submission on ENTER key. All the best !!!!

Malaspigar said...

Awesome thanks, dude

Anonymous said...

excellent!!!!!!!!!!!!

Daniel said...

In one word, AWESOME :D

many many thanks this is just what i was looking for :D

Partialbits said...

please add xss blocking method. or just escape the html.

dynamikus said...

I love your tutorials are so easy understandable.
Thnx a lot from Albania

Anonymous said...

excellent. Congratulations.

Raajesh said...

ThanQ....V'much

Anonymous said...

great work man.....congrats

me said...

Hello Srinivas, thank you so much for your help I love this script it kicks ass, I have used so many of your scripts on my next website projects, you are the man. I really think you should put a donation icon in your website, if you do that i will be the first one to donate in your website, you really makes us happy and you are a life savior and we should appreciate that I will think all user will donate something even 1$ is something for people who does not have enough money, you really should think about this.

rccjjf said...

Parabéns (congratulations)

Anonymous said...

hey srini,
i was going through the paypal code (http://www.9lessons.info/2011/03/payment-system-with-paypal.html) and the error i am getting is that after successfully doing transaction i am redirected to success page but getting error message. I am not getting the product id there.
Please Help

Tought5 said...

and if i want to add 1 more thing..for example

Firstname -- Lastname -- Date

like that..how can i do that, i tryied but that it seems not work.. if u can help, i appreciate it.. nice tutorial btw :)

nick.onlyy@gmail.com

Tom said...

do you have or know of a grid like this out there as a JQuery component - customizable with paging, sort, etc - i am looking to implement a standard AJAX updateable grid but it would be great to just send the grid the db query and let it do all the work while i can customize some elements

Anonymous said...

thanks friend, I very much appreciate this important contribution.


Ariel Macintosh™

admin said...

Hey nice tutorial....

prokopyo_jr said...

Another awesome tutorial! I need this... :)

rajeev said...

hmmm grt tutorial man

知行 said...

it's good

Anonymous said...

good work

Anonymous said...

nice example
:harish soni

Anonymous said...

before this tutorial i was a "chimbin" , Excelent...thanks!!

Anonymous said...

some errors in the css.

dhananjay said...

hi nice thought sir

Zie Eiz said...

how can i download the script? i can't download from here...

jhon said...

nice, i need this script, thank's

Anonymous said...

love it thank you.
is it possible to modify it so when you click on one of the entry to edit will open only the one you clicked on instead of both?

web design mauritius said...

just awesome great works and thanks for sharing bookmarked and share

Brian said...

Great work as always !! thanks for the share

Godwin said...

Awesome this help me

Anonymous said...

Awesome .. thanx

Phan Chính Dũng said...

Thank

Anonymous said...

Sweet as

thenamelessclode said...

thanks. 9lessons is the source on great, sort code

Anonymous said...

how could you use this to create a select box. i tried a few things but to no luck. by the way thanks for this great code. many uses for it!!

Anonymous said...

how to use this in a profile of a member?? because it only have a equal id? what can i do to make it work? by the way thanks.. this is a great tutorial..

Anonymous said...

sir please answer my question.. what will i do if the id is same? the id from the tr..

Shon Gale said...

Howdy! I hope you are listening. I have a question.
Q: If you use Checkboxes or "select" how do I set up the "span"?

Unknown said...

Hi and congratulations for this nice example.

I have this problem: when update the fields in the table MYSQL the spaces between words are eliminated.

For example this phrase: Hello world !
In update is stored as: Helloworld!

Can you help me?
Cheers

Anonymous said...

I appreciate your lession. It helps me a lot!

Anonymous said...

Helloo

You are awesome!

Thanks a lot

Anonymous said...

Geate script
But when I tried to write Hebrew letters I got uncoded notes in my DB.
How can it be fixed?

sanchit gupta said...

this is the best website i have ever gone through

Eduardo said...

Hi, Is there a way to run this script in aspx?

Thanks.

Anonymous said...

I want add a "<" select ">", how Can I do?

Anonymous said...

Great!

Bong said...

Nice tuts! I'd like to know how to do this in individual "<" tr ">"

thanks

Anonymous said...

Fantastic tutorial, many thanks!

Anonymous said...

great work

Anonymous said...

Super duuuuper example.. gobbled it up.

Qing Long said...

Great tutorial

But i have some trouble.. table_edit_ajax.php can only run 1 mysql query? because I'm trying to add in sending of email after table is edited..

Syam kumar said...

awesome tutorial. I this and enhanced in my project. Thanks for providing such gr8 tutorials.

Anonymous said...

vary good

Thomas de Jesus said...

Is it possible to add rows as well as edit?

Unknown said...

yaaa thank u
very helpful!

Anonymous said...

thans
very helpful

Anonymous said...

Thanks so much, it's simpler and yet much better than many commercial scripts.

Leolando L. Tan said...

very good tutorial but im still starting using ajax with php and i tried making a CRUD table. i have a button that adds new rows(static for testing), my problem is the buttons dont run. they have the same class for javascript .click() but the buttons of the newly added rows doesnt work. please help..

Amit.. said...

good one thnks a lot ;)

Anonymous said...

Hello there is a way that instead a .php file could be an .html?

Thanks a lot in advance for your answer.


Alex

Anonymous said...

Thanks for you tutorial...Good description...easy to understand.. thanks

Anonymous said...

Its a goodie. Thanks for your effort

venu said...

very good....and Excellent

Anonymous said...

wooooh.,,. nice post. thanks alot dude, its very useful for my project.. :)

Jonatan Osalde said...

hey dude how i do for insert paragraph on the field

Anonymous said...

Best tut bro!

Waad Lamiri said...
This comment has been removed by the author.
Oscar Nilsson said...

Really nice one! Works like a charm!

Anonymous said...

Awesome tutorial, I'm gonna be a new follower

Justinas Židonis said...

I cant seem to get it working with mssql database and codeigniter. Any thoughts?

Justinas Židonis said...

Hello, I have one more question. How to make this for select elements?

chockonutty said...

Thank you for tutorial. It's great, but I have a little problem with it.
When the db field contain quotes, for example:
This is a "test"
when you clck for live edit, the text in the quotes disappears, if it is at the beginning - the whole field is fon on click. I tried many wayes, but no success. My question is, where exactly in the code I have to escape special charachters like theese?
10x in advance:)

chockonutty said...

A found a solution. Just in tableedit.php, variables in html tags have to be at single quotes, not double :)

Melvin Thomas said...

Amazing Tutorial!

How can edit the fields separately?

Anonymous said...

thanks you very much

Elena Urman said...

Thank you, thank you! simply the best

professionaltools said...

Hi ,
Thank's a lot for this Tut . Thats So Helpful for me .
I have question . in file table_edit_ajax.php When I open it i see error :

Notice: Undefined index: id in C:\xampp\htdocs\Live_table_edit\table_edit_ajax.php on line 3

how i can remove it ?

Anonymous said...

Nice post Helps alot

Trường Kobe said...

thank you very much

Trường Kobe said...

Thank you very much

Mutie Mule said...

Thanks alot, my problem is the value is not updated in the database.

Anonymous said...

Thank you very much

Leonard Drapeza said...

how to integrate this to codeigniter?
please help!

Anonymous said...

Thanks.

ಶ್ರೀಪತಿ ಗೋಗಡಿಗೆ said...

Very nice script, thanks brother.

Anonymous said...

very help-full.

Anonymous said...

Thanks a lot! This tutorial will help me in my school projects

Anonymous said...

good

Anonymous said...

good example, but for data more than 2000 its slowdown my page its because of /jquery/1.5/jquery.min.js" did you help me how to do it without slowdown the page

darshan tiwari said...

i have created a control pannel live edit and delete data form database and displaye the pannel.but i have click an save button but value have not change and not save in database.can you help me.i have using ajax javascript and php so please help me...

Anonymous said...

Hi

Nice!
It is possible to edit ONLY the right field, showing however the left field also?
BR

pixy said...

Can you please guide me whether how to do it with individual td ? like if I click on "Firstname" only the firstname should be editable and not the lastname

Ian.J. Gough said...

Great Job I'm going to implement this into my Banner Bar program.
Thanks for sharing and all the best,
Ian

Anonymous said...

Very Nice

Adil Jafri said...

How i can increase number of fields in the record i.e. number of columns

Ivan Wiegand said...
This comment has been removed by the author.
Ivan Wiegand said...

I love this, I love this, I love this! I love it mostly because it taught me a lot about jQuery, and I didn't have to use a plugin! What would be an amazing enhancement is if we could add the ability to submit the record by hitting enter, or clicking something. BTW, I gave up on checkboxes. Too much trouble. I use combos instead for boolean options, and it turns out to be better because it eliminates accidental box-checking.

Exam said...

i already have ajax-jquery on saving and retrieving part. this is exactly what im looking for! thank you for your time in creating this.

AHMED ALI said...

FABULOUS WORK YOU ARE GENIUS MAN

Anonymous said...

Hey its really working nice thanks a lot.

konveksi tangerang said...

wow..its very useful for my project.. :) thanks

Anonymous said...

Very useful tutorial

Jörg said...

Hey, really a great tutorial and it works quite fine for me.

I have two issues by using autocomplete and date picker inside this.
a.) autocomplete works fine, but selected content is not detected as a change
b.) opening the date picker and select a date causes to change to "ready" mode

Does someone solved this eventually already?

M chaudhry said...

A life savor Article I used this to make comments editable :) Thank You

kishan kumar said...

I had a question?
how to edit a page(for ex:edit option in shine.com of user fields..he can edit his fields i.e year of passing and firstname,lastname,email etc--)how this can be done... I developed a code for this but when i click edit button it is display a pop-up box and contains two buttons(Save & Cancel). I don't want to display pop-up boxes.when i click Save & cancel buttons should come(what i mean exactly is shine.com)..can anyone help...Thanks..

kishan.d

Guru said...

Thank you

Anonymous said...

thank you so much :)

Anuradha Verma said...

Just Love it

Post a Comment