Loading Searchbox
9lessons programming blog logo
Thursday, May 14, 2009

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

32 comments
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;}

Old Post:
Insert and Load Record using jQuery and Ajax


Sponsored Links

Recent Posts

Share this post

Subscribe to my feeds

Subscribe
Comments
32 comments
Ash said...

why not go all out with jquery and replace

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

with

$("#content").value('');
$("#content").focus();

harshit said...

impressive blog..u've got..
n thanx for the trick...
keep up the good work..

Sean said...

|why not go all out with jquery and replace
|
|document.getElementById('content').value='';
|document.getElementById('content').focus();
|
|with
|
|$("#content").value('');
|$("#content").focus();

Or even better:

$("#content").value('');
$(this).focus();

Anonymous said...

i love it, from indonesian

Anonymous said...

Good Work..

Anonymous said...

Or just $("#content").val("").focus();

Anonymous said...

i have put all details from database and it's not working nothing update i don't see anything ??

I need to create a table in database ??? if yes
tell me thanks.

Anonymous said...

ok its work now was the table missing :)

CREATE TABLE messages(
msg_id INT AUTO_INCREMENT PRIMARY KEY,
msg TEXT
);

damien said...

How to keep the messages visible after refresh the page ??

Kim, Kiseok said...

it helps me. thank you :)

Anonymous said...

I don't know why... but slideDown and fadeIn dont work with me.
I have jQuery 1.3.2. Tried adding jQuery easing still nothing.
any ideas?

Srinivas Tamada said...

Which browser you using..

Anonymous said...

this is alex timbal, hello nice tutortial

386jasondavis said...

I love this could you post a tutorial on how to combine this with your other tutorial of deleting post as well that would be really great

Srinivas Tamada said...

@386jasondavis

Thanks

Anonymous said...

Great Work.you are Pride for india.thanks a lot for sharing your knowledge.

Anonymous said...

how do you retain the listing of the records after you refresh the page everything is not shown.

thanks

Srinivas Tamada said...

Demo not connected database.

Harsha M V said...

Awesome post.

Anonymous said...

Quick question: I'm trying to set this up using ASP and it works, except that all the spaces between words are removed for some reason when it's sent over to my ASP page. Any idea why that might be happening?

Srinivas Tamada said...

Can you send me the screen shot.

srinivas@inbox.com

Anonymous said...

how do you keep comments on page????? when i refresh, they are gone

Justin said...

Annon .... I am looking at the same problem. My suggestion is you create a table of the current comments under the insert box (at the bottom of the insert page) so when you visit you see all current posts and then the insert text box. When a user inserts a new message this will show at the top of the list. If they refresh then it will be shown in the new list you have just created!! :)

Srinivas Tamada said...

@Justin

Demo Page no database connection.

Justin said...

Hello, first of thanks for the great tutorials and fab website!

I am having a problem with this script and some of the other comment type scripts. It appears when a large message is posted, the message shows over any content which may be below the post box. For example, I have set up a list of all comments underneath the post box and if I post a large message then it goes all weird and the message overhangs all the others.

Is there a way to make this script push down any content below it when it inserts a new message?

Thanks

Justin said...

Despite being an amatuer at ajax I think I have found a solution to my above question. I would post the code here incase others wanted to use it but it wont let me! lol

Thanks anyway!

Anonymous said...

how to connect to my data base
i mean what to add to my php file
i am just a beginner..:(

jeffery jacob said...

great tutorial for new users like me who has just step into the world of jquery.......

Thanx very much for such a simple nice and clean tutorial.........

and feels great when an indian shares his knowledge............................

Anonymous said...

very good script to developer propose thank you

ravi said...

also write how to limit the display

Anonymous said...

very nice

Anonymous said...

It's realy nice one trick

I have to change oreder of the comment display

one I insert comment after save this newly comment display on top of comment list. in this script newly inserted comment display in bottom.

pls help me to set this one

Post a Comment

Orkut | FacebookAbout Me

Subscribe now!Feeds RSS

Subscribe now!Recent Posts

Subscribe now!Categories

Subscribe now!Comments

People Says

@9lessons thank you for the great tutorials, we truly appreciate your contributions to the design community.

Smashing Magazine

Join into my community

Labs ProfileRelease

My ProfileTwitter