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 DemoDatabase 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>
<div id="flash"></div>
<ol id="update" class="timeline">
</ol>
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;}
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
why not go all out with jquery and replace
document.getElementById('content').value='';
document.getElementById('content').focus();
with
$("#content").value('');
$("#content").focus();
impressive blog..u've got..
n thanx for the trick...
keep up the good work..
|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();
i love it, from indonesian
Good Work..
Or just $("#content").val("").focus();
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.
ok its work now was the table missing :)
CREATE TABLE messages(
msg_id INT AUTO_INCREMENT PRIMARY KEY,
msg TEXT
);
How to keep the messages visible after refresh the page ??
it helps me. thank you :)
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?
Which browser you using..
this is alex timbal, hello nice tutortial
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
@386jasondavis
Thanks
Great Work.you are Pride for india.thanks a lot for sharing your knowledge.
how do you retain the listing of the records after you refresh the page everything is not shown.
thanks
Demo not connected database.
Awesome post.
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?
Can you send me the screen shot.
srinivas@inbox.com
how do you keep comments on page????? when i refresh, they are gone
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!! :)
@Justin
Demo Page no database connection.
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
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!
how to connect to my data base
i mean what to add to my php file
i am just a beginner..:(
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............................
very good script to developer propose thank you
also write how to limit the display
very nice
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