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?
ReplyDeleteYou do
document.getElementById('content').value='';
document.getElementById('content').focus();
instead of
('#content').html('').focus();
Just to know.
Thanks for the article.
@lossendae
ReplyDeletesome browsers not supporting value=''
Thanks alot....
ReplyDeletewww.sakshieducation.info
www.studentscorner.info
Thanks! this tutorial is very usefull (the other too)!!
ReplyDeleteAnother great tutorial Srinivas. Most of what I know about jQuery is thanks to you. Keep up the great work!
ReplyDelete@Srinivas
ReplyDeleteIt'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!
ReplyDelete@lossendae
ReplyDeleteI was thinking the same thing. Nice example nonetheless.
When I insert data in MySQL, spaces are missing!
ReplyDeleteWhenIwriteitwillbelikethis
Whats wrong?
a great tutorial there...
ReplyDeleteas 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.
ReplyDeleteHello there Srinivas,
ReplyDeleteAny 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)
ReplyDeleteThe url here
Any help
Thanks
Pradyut
Simply amazing.
ReplyDeleteA 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 ...
ReplyDeleteHelpppp....
ReplyDeletei'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?
ReplyDeleteOnce 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.
ReplyDeleteI have tested this in firefox and safari and still doesn't work...
Thank you!
Hello,
ReplyDeleteI 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
ReplyDelete<div id='old_updates'>
// Display old updates form messages table.
</div>
Thanks Srinivas, I got it working perfectly now!
ReplyDelete-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?
ReplyDeleteNice 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.
ReplyDeleteThanks 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
ReplyDeleteNice tutorial.
ReplyDeleteI 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.
nice
ReplyDeleteThank you for all your cours bro
ReplyDeleteThanks
ReplyDeletenice one...like it!!!
ReplyDeleteIt's works find for php mysql, but for asp ms access, all the space are gone!
ReplyDeleteWhy doesn't the file show old posts? I don't get it.
ReplyDeletedude why dont u explain in video format
ReplyDeletedont work in last internet explorer
ReplyDeletethe "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
ReplyDeleteGood one
ReplyDeleteI like this, but i need it to get the last 5 results and check for updates every few seconds without clicking update.
ReplyDeleteAny ideas?
Srinivas, live() has been removed in jQuery 1.9
ReplyDeletecan you given example for data are on the webpage and insert some text into database then without refresh page data are update
ReplyDeletecan you example for some data are show AND retrive data form databae when insert data without refresh page by ajx
ReplyDelete
ReplyDeletethank you for sharing your knowledge ..and your beautiful :) ?
Thanks Bro for sharing this wonderful script. I added to my collection.
ReplyDeleteThe 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
hii
ReplyDelete