Live Update and Delete Records with Animation Effect using Jquery and Ajax.
Wall Script
Follow Me:
Monday, November 02, 2009

Live Update and Delete Records with Animation Effect using Jquery and Ajax.

Some days back I had posted popular articles Insert a Record with animation effect. and Delete Records with Random Animation Effect using jquery and ajax. I received lot of requests from my readers that asked to me how to combine both scripts. So I had developed a tutorial Live update and delete records with animation effect using jquery and ajax implementing live() jquery event.

Take a look at Twitter and Facebook style application live demo

Live Update and Delete Records with Animation Effect using Jquery and Ajax.

Download Script     Live Demo

Database Table Details:
CREATE TABLE messages(
msg_id INT AUTO_INCREMENT PRIMARY KEY,
msg TEXT
);



update_delete.php
Contains javascript and HTML code update button with class "update_button" and textarea with id "content". When a user click update button the new message is display to top of the ol timeline list with an id "update" with an animated slide Down effect with jQuery and Ajax.

If you want fadeIn and fadeOut effect just replace the word "slideDown" to "fadeIn" and "slideUp" to "fadeOut" in this following script.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/
libs/jquery/1.3.0/jquery.min.js
">
</script>
<script type="text/javascript" >
$(function() {

//Update Message...
$(".update_button").click(function() {

var boxval = $("#content").val();
var dataString = 'content='+ boxval;

if(boxval=='')
{
alert("Please Enter Some Text");
}
else
{
$("#flash").show();
$("#flash").fadeIn(400).html('<img src="ajax-loader.gif" align="absmiddle"> <span class="loading">Loading Comment...</span>');

$.ajax({
type: "POST",
url: "update_data.php",
data: dataString,
cache: false,
success: function(html){
$("ol#update").prepend(html);
$("ol#update li:first").slideDown("slow");
document.getElementById('content').value='';
document.getElementById('content').focus();
$("#flash").hide();
}
});
} return false;
});

//Delete Message..

$('.delete_update').live("click",function()
{
var ID = $(this).attr("id");
var dataString = 'msg_id='+ ID;
if(confirm("Sure you want to delete this update? There is NO undo!"))
{

$.ajax({
type: "POST",
url: "delete_data.php",
data: dataString,
cache: false,
success: function(html){
$(".bar"+ID).slideUp('slow', function() {$(this).remove();});
}
});

}
return false;
});

});
</script>
// HTML code
<div>
<form method="post" name="form" action="">
<h3>What are you doing?</h3>
<textarea  name="content" id="content" maxlength="145" >
</textarea><br />
<input type="submit" value="Update" name="submit" class="update_button"/>
</form>
</div&gt;
<div id="flash"></div>
<ol id="update" class="timeline">
</ol>
<div id='old_updates'>
// Display old updates form messages table.
</div>



update_data.php
Contains simple PHP Code displays recently inserted record details from the database.
<?php
include('db.php');
if(isSet($_POST['content']))
{
$content=$_POST['content'];
mysql_query("insert into messages(msg) values ('$content')");
$sql_in= mysql_query("SELECT msg,msg_id FROM messages order by msg_id desc");
$r=mysql_fetch_array($sql_in);
$msg=$r['msg'];
$msg_id=$r['msg_id'];
}

?>

<li class="bar<?php echo $msg_id; ?<">
<div align="left">
<span ><?php echo $msg; ?> </span>
<span class="delete_button"><a href="#" id="<?php echo $msg_id; ?>" class="delete_update">X</a></span>

</div>
</li>

delete_data.php
Contains PHP code. Delete record from the database.
<?php
include("db.php");
if($_POST['msg_id'])
{
$id=$_POST['msg_id'];
$id = mysql_escape_String($id);
$sql = "delete from messages where msg_id='$id'";
mysql_query( $sql);
}
?>

CSS Code
*{margin:0;padding:0;}
ol.timeline{
list-style:none;font-size:1.2em;
}
ol.timeline li{
display:none;position:relative;
padding:.7em 0 .6em 0;
border-bottom:1px dashed #000;
line-height:1.1em;
background-color:#D3E7F5;
height:55px;
width:499px;}
ol.timeline li:first-child{
border-top:1px dashed #000;}
Was this article helpful?
Thanks! Your feedback helps us to improve 9lessons.info


43 comments:

  1. Why don't you use JQuery chaining when possible?

    You do

    document.getElementById('content').value='';
    document.getElementById('content').focus();

    instead of

    ('#content').html('').focus();

    Just to know.
    Thanks for the article.

    ReplyDelete
  2. @lossendae

    some browsers not supporting value=''

    ReplyDelete
  3. Thanks alot....

    www.sakshieducation.info

    www.studentscorner.info

    ReplyDelete
  4. Thanks! this tutorial is very usefull (the other too)!!

    ReplyDelete
  5. Another great tutorial Srinivas. Most of what I know about jQuery is thanks to you. Keep up the great work!

    ReplyDelete
  6. @Srinivas

    It's your tutorial that is using the following line:

    document.getElementById('content').value='';

    ReplyDelete
  7. Can u pleas tell me how do i add a username or user id into this?? thanks!

    ReplyDelete
  8. @lossendae

    I was thinking the same thing. Nice example nonetheless.

    ReplyDelete
  9. When I insert data in MySQL, spaces are missing!

    WhenIwriteitwillbelikethis

    Whats wrong?

    ReplyDelete
  10. a great tutorial there...

    as multi line inserts in the textbox are shown in the same line.

    the code there..
    $.ajax({
    type: "POST",
    url: "update_data.php",
    data: dataString,
    cache: false,
    success: function(html)

    the dataString should be...
    dataString.replace(/\n/g, "
    ").replace(/\n\n+/g, '

    ').replace(/(<\/?)script/g,"$1noscript"),

    the script may have gone wrong up..
    so the link here

    thanks
    Pradyut
    India

    ReplyDelete
  11. It would be impossible for the script to detele the row from the mysql database.the php to set the Id needs the page to refresh. I don't think It will work.

    ReplyDelete
  12. Hello there Srinivas,

    Any thoughts on how to get the animation rolling based on live updates in MYSQL server?

    Say, The table is getting updated by other scripts .. and I want to present the real time changes of my table.

    This is a great tutorial though, keep up the good work.

    Cheers.

    T

    ReplyDelete
  13. i made a page which also shows the history but saw that the effects are not working. The delete is working but the slide up is not( on reloading the page the comment is deleted)

    The url here

    Any help
    Thanks
    Pradyut

    ReplyDelete
  14. A good script idea, why just show the new data but the data entered in the MySQL database can not perform. I've tried but failed, can you can tell me the script? Thanks ...

    ReplyDelete
  15. Helpppp....

    i'm making wall post like facebook, n it can delete comments or status, when i click the delete button, the comments/status was deleted, but the page like refresh, so the animation slide up can't see by user. how to make it stay at this comments/status..?? please anyone help me....it's important..thx

    ReplyDelete
  16. Can you build tutorial which would lead to populate form/select/option pulling data from mysql?

    ReplyDelete
  17. Once the page gets refreshed the old post are lost??? I looked in mysql and the ARE being saved in the database... PLEASE HELP I can't get them to STAY posted after a page refresh.

    I have tested this in firefox and safari and still doesn't work...

    Thank you!

    ReplyDelete
  18. Hello,

    I posted earlier today but I don't see my comment. I have used your script and have got everything running BUT for some reason when I refresh the page and then come back to the comments, they are gone. I looked into mysql and they are inserted just fine, however they don't show as older post. Everything else works great! I'm super excited about this comment system and would really appreciate anyones answer or help on the matter.

    Thanks so much!

    ReplyDelete
  19. You have to display old results between folling HTML tags using PHP

    <div id='old_updates'>
    // Display old updates form messages table.
    </div>

    ReplyDelete
  20. Thanks Srinivas, I got it working perfectly now!

    -shaun

    ReplyDelete
  21. Anyway to make this work with wordpress posts? I would love to use this with my blog and make a section (sports) update live with recent news. Any way to do this?

    ReplyDelete
  22. Nice script, It would be much nicer if you limit the word count to the background height OR make the back ground height dynamic to fit as many written words in the paragraph.

    Thanks for sharing the sweet idea

    ReplyDelete
  23. the deleting of comments animation is not working for me please help, the data deletes from my database but the animation does not play

    ReplyDelete
  24. Nice tutorial.

    I wonder if it possible to use

    tr

    instead of of ol

    I have a table with many columns and would like to have a possibility to delete table rows
    Thanks.

    ReplyDelete
  25. It'd be great if you can comment on main ajax code lines, explaining what you're doing, so this would be really a tutorial. The code is a very nice approach thou. I'd only suggest to include the way you display the old updates, so you can see them when you visit the page.

    ReplyDelete
  26. It's works find for php mysql, but for asp ms access, all the space are gone!

    ReplyDelete
  27. Why doesn't the file show old posts? I don't get it.

    ReplyDelete
  28. dude why dont u explain in video format

    ReplyDelete
  29. dont work in last internet explorer

    ReplyDelete
  30. the "X" sin is not working as u8 havent given anything in the <a href="#" so its not hiding the div when clicking on that cross sign the cross sin is not working

    ReplyDelete
  31. I like this, but i need it to get the last 5 results and check for updates every few seconds without clicking update.

    Any ideas?

    ReplyDelete
  32. Srinivas, live() has been removed in jQuery 1.9

    ReplyDelete
  33. can you given example for data are on the webpage and insert some text into database then without refresh page data are update

    ReplyDelete
  34. can you example for some data are show AND retrive data form databae when insert data without refresh page by ajx

    ReplyDelete


  35. thank you for sharing your knowledge ..and your beautiful :) ?

    ReplyDelete
  36. Thanks Bro for sharing this wonderful script. I added to my collection.

    The only problem i have with it is, takes longer to load data from array so i decided to pull all my data from db then put all fetched data serialised in a text file and the call text file $_sessionID.txt dynamically at run time, it changes for each user of my website then gets deleted after logout. still it is slow as it was reading form array. Any suggestion how to improve the loading time?

    Kind regards

    ReplyDelete

Make in India