Live Table Edit with Jquery and Ajax
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;
}

117 comments:

  1. Exellent


    Ariel Macintosh™

    ReplyDelete
  2. Hey nice tutorial....

    ReplyDelete
  3. thanks a lot mate , thats what i was searching

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

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

    ReplyDelete
  6. Awesome thanks, dude

    ReplyDelete
  7. excellent!!!!!!!!!!!!

    ReplyDelete
  8. In one word, AWESOME :D

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

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

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

    ReplyDelete
  11. excellent. Congratulations.

    ReplyDelete
  12. great work man.....congrats

    ReplyDelete
  13. 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.

    ReplyDelete
  14. 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

    ReplyDelete
  15. 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

    ReplyDelete
  16. 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

    ReplyDelete
  17. thanks friend, I very much appreciate this important contribution.


    Ariel Macintosh™

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

    ReplyDelete
  19. nice example
    :harish soni

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

    ReplyDelete
  21. some errors in the css.

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

    ReplyDelete
  23. nice, i need this script, thank's

    ReplyDelete
  24. 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?

    ReplyDelete
  25. just awesome great works and thanks for sharing bookmarked and share

    ReplyDelete
  26. Great work as always !! thanks for the share

    ReplyDelete
  27. Awesome .. thanx

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

    ReplyDelete
  29. 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!!

    ReplyDelete
  30. 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..

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

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

    ReplyDelete
  33. 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

    ReplyDelete
  34. I appreciate your lession. It helps me a lot!

    ReplyDelete
  35. Helloo

    You are awesome!

    Thanks a lot

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

    ReplyDelete
  37. this is the best website i have ever gone through

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

    Thanks.

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

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

    thanks

    ReplyDelete
  41. Fantastic tutorial, many thanks!

    ReplyDelete
  42. Super duuuuper example.. gobbled it up.

    ReplyDelete
  43. 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..

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

    ReplyDelete
  45. Is it possible to add rows as well as edit?

    ReplyDelete
  46. thans
    very helpful

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

    ReplyDelete
  48. 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..

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

    Thanks a lot in advance for your answer.


    Alex

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

    ReplyDelete
  51. Its a goodie. Thanks for your effort

    ReplyDelete
  52. very good....and Excellent

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

    ReplyDelete
  54. hey dude how i do for insert paragraph on the field

    ReplyDelete
  55. This comment has been removed by the author.

    ReplyDelete
  56. Really nice one! Works like a charm!

    ReplyDelete
  57. Awesome tutorial, I'm gonna be a new follower

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

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

    ReplyDelete
  60. 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:)

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

    ReplyDelete
  62. Amazing Tutorial!

    How can edit the fields separately?

    ReplyDelete
  63. thanks you very much

    ReplyDelete
  64. Thank you, thank you! simply the best

    ReplyDelete
  65. 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 ?

    ReplyDelete
  66. Nice post Helps alot

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

    ReplyDelete
  68. Thank you very much

    ReplyDelete
  69. how to integrate this to codeigniter?
    please help!

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

    ReplyDelete
  71. 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

    ReplyDelete
  72. 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...

    ReplyDelete
  73. Hi

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

    ReplyDelete
  74. 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

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

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

    ReplyDelete
  77. This comment has been removed by the author.

    ReplyDelete
  78. 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.

    ReplyDelete
  79. 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.

    ReplyDelete
  80. FABULOUS WORK YOU ARE GENIUS MAN

    ReplyDelete
  81. Hey its really working nice thanks a lot.

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

    ReplyDelete
  83. Very useful tutorial

    ReplyDelete
  84. 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?

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

    ReplyDelete
  86. 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

    ReplyDelete
  87. thank you so much :)

    ReplyDelete
  88. Proves to be a very useful site :-)

    ReplyDelete
  89. how to put select option on edit table. thanks

    ReplyDelete
  90. Thanksssssss great tutorial!!! <3

    ReplyDelete