This tutorials explains how to insert and display record without refreshing web page. I had developed using jQuery and Ajax it's simple and useful take a look at this post.
Next Part
Slide down effect.
Next Part
Slide down effect.
Download Script 
Live DemoDatabase Design
My previous post : Twitter Like More Button with jQuery and Ajax.
inserting.php
Contains of javascript and HTML code.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/
libs/jquery/1.3.0/jquery.min.js">
</script>
<script type="text/javascript" >
$(function() {
$(".comment_button").click(function() {
var test = $("#content").val();
var dataString = 'content='+ test;
if(test=='')
{
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_insert.php",
data: dataString,
cache: false,
success: function(html){
$("#display").after(html);
document.getElementById('content').value='';
document.getElementById('content').focus();
$("#flash").hide();
}
});
} return false;
});
});
</script>
// HTML code
</div>
<div id="flash"></div>
<div id="display"></div>
libs/jquery/1.3.0/jquery.min.js">
</script>
<script type="text/javascript" >
$(function() {
$(".comment_button").click(function() {
var test = $("#content").val();
var dataString = 'content='+ test;
if(test=='')
{
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_insert.php",
data: dataString,
cache: false,
success: function(html){
$("#display").after(html);
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="comment_button"/>
</form></div>
<div id="flash"></div>
<div id="display"></div>
demo_insert.php
PHP Code display recently inserted record 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);
}
?>
<b><?php echo $r['msg']; ?></b>Tutorials list
9lessos Table of Contents
Feel free post a comment. Please don't spam
Next Part
Insert a Record with animation slide down effect using jQuery and Ajax.
Good one...
Is it spam proof?
nice one... but please... remove the layout tables. we live in 2009
removed layout tables
why use $("#flash").show();
$("#flash").fadeIn(400).html('img src="ajax-loader.gif" align="absmiddle"> span class="loading">Loading Comment...span>');??
jquery.ajax has the option: beforeSend use that insteed
Thanks for this script and thanks for your effort too... :)
Thanks,
Vivek
[http://www.developersnippets.com]
good script but your shirt is better.
thanks from http://www.bugzlife.com
thanks
nice nice
really good good i seach this tutorial anytime
how do i limit the displayed comment?
Nice script
good script, but how can I load old messages first and use a button to delete the message with the same script
Nice script, but open to SQL injection.
thanks... it helps me a lot
Thanks for script, it's really great and simple. I'm using it for tags... it would be great if there would be solution to reverse display order of submitted content.
This is the part to be edited but I cant figure out how to solve it:
success: function(html){
$("#display").after(html);
}
Thanks.
great
nice
good post
how to create share any links like facebook using jquery
interesting
thanks, excellent script, just what i was looking for!!
Is it possible to pass POST[] array to jquery insert.?
nice
Brilliant, it really made things come to lite, for a whole day I was struggling with something, but this... Awesome mate, keep it up.
thanks for the script...:)
When adding more than one record problem is the problem can you help when you add?
Is there a way to make this code reusable? (i.e several comment boxes on the same page)
thanx
very good! :)
Good
very nice post but doesnt work in ie 6 version pls help ????
good
good