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
Take a look at Twitter and Facebook style application live demo
Download Script 
Live DemoDatabase Table Details:
CREATE TABLE messages(
msg_id INT AUTO_INCREMENT PRIMARY KEY,
msg TEXT
);
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() {
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_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();});
}
});
}
});
</script>
// HTML code
</div>
<div id="flash"></div>
<ol id="update" class="timeline">
</ol>
<div id='old_updates'>
// Display old updates form messages table.
</div>
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>
<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 = mysql_escape_String($id);
$sql = "delete from messages where msg_id='$id'";
mysql_query( $sql);
}
?>
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;}
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;}
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.
@lossendae
some browsers not supporting value=''
Thanks alot....
www.sakshieducation.info
www.studentscorner.info
Thanks! this tutorial is very usefull (the other too)!!
Another great tutorial Srinivas. Most of what I know about jQuery is thanks to you. Keep up the great work!
@Srinivas
It's your tutorial that is using the following line:
document.getElementById('content').value='';
Can u pleas tell me how do i add a username or user id into this?? thanks!
@lossendae
I was thinking the same thing. Nice example nonetheless.
When I insert data in MySQL, spaces are missing!
WhenIwriteitwillbelikethis
Whats wrong?
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
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.
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
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
A more advanced one..
here
now with automatic updates
here
Simply amazing.
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 ...
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
Can you build tutorial which would lead to populate form/select/option pulling data from mysql?
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!
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!
You have to display old results between folling HTML tags using PHP
<div id='old_updates'>
// Display old updates form messages table.
</div>
Thanks Srinivas, I got it working perfectly now!
-shaun
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?
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
the deleting of comments animation is not working for me please help, the data deletes from my database but the animation does not play
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.
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.
nice
Thank you for all your cours bro
Thanks
nice one...like it!!!