Insert a Record with animation slide down effect using jQuery and Ajax

Few days back I had posted tutorial "Insert and Load Record using jQuery and Ajax". Today's post new feature added animated Slide Down effect apply to every upcoming post.

 Download Script     Live Demo

Database Table Details:

Take a look at old post Insert and Load Record using jQuery and Ajax.

insert.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 effect just replace the code "slideDown" to "fadeIn"

<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_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: "demo.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;
});
});
</script>
// HTML code

<div>

<form method="post" name="form" action="">

<h3>What are you doing?</h3>

<textarea cols="30" rows="2" 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>

demo.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>

<div align="left">

<span ><?php echo $msg; ?> </span>

</div>

</li>

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:45px}
ol.timeline li:first-child{
border-top:1px dashed #000;}