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
Can someone please tell me how to use the element.replace(html) function in this, rather than the after function?
I'm sure it's a very simple workaround but I can't get it working, it just hangs on loading. I need it to replace the whole lot because I am bring up all records in a date order that the user enters.
Any help would be really appreciated, I'm tearing my hair out!
Don't bother approving my comment. FOr some reason I was trying to use a prototype function and when I realised it was Jquery I just used replaceWith. Simples!
Lovely script, thanks!
If I insert "You & Me" then only You will be submitted all the string after & will be terminated. Any suggestion...
For safety this should be
$content=$_POST['content'];
$content=mysql_real_escape_string($_POST['content']);
thanks for the coding i really need that one
any idea to how I would add a "see older posts button" ?
This is a very good tutorial
great output!..but my problem is whenever i refresh the page, the comment will be removed in the current page..can anyone help me with this problem?
thanks u!
how to put in it my blog? help me please i want this so badly
You should definitely use a function like sprintf() to protect yourself against SQL injection attacks.
Thank U ..
thank u buddy
good...
Thank you
v nice.
Wao Exact the same i was looking for thanx for sharing this
gooD ONE BRO...
This is the script I was looking for. Awesome tips given by you brother. I will try to implement it ASAP on my site.
nice post
The post is best I like it. I think this post is very help full to the software developers. those who have a query about jQuery & Ajax.
As jquery is important & easy to learn.Also it is important in programming language
THNANKS BUDDY
very good
HI friends Thank for making it available
Thanks !