Insert – Load Record using jQuery – Ajax
| Hi All,I would like to share this tutorial, I grab this from 9lessons.info which is really good I reckon. I use this method in one of my projects.This tutorials explains how to insert and display record without refreshing web page.Screenshot  index.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Insert Record with jQuery and Ajax</title>
<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 element = $(this);
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>Loading Comment...</span>');
$.ajax({
type: "POST",
url: "insert.php",
data: dataString,
cache: false,
success: function(html){
$("#display").after(html);
document.getElementById('content').value='';
$("#flash").hide();
}
});
}
return false;
});
});
</script>
<style type="text/css">
body{
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
}
.comment_box{
background-color:#D3E7F5; border-bottom:#ffffff solid 1px; padding-top:3px
}
a{
text-decoration:none;
color:#d02b55;
}
</style>
</head>
<body>
<div align="center">
<table cellpadding="0" cellspacing="0" width="500px">
<tr>
<td> <div align="left">
<form method="post" name="form" action="">
<table cellpadding="0" cellspacing="0" width="500px">
<tr>
<td align="left">
<div align="left"><h3>What are you doing?</h3></div>
</td>
</tr>
<tr>
<td style="padding:4px; padding-left:10px;">
<textarea cols="30" rows="2" style="width:480px;font-size:14px;
font-weight:bold" name="content" id="content" maxlength="145" >
</textarea><br />
<input type="submit" value="Update" id="v" name="submit"/>
</td>
</tr>
</table>
</form>
</div>
<div style="height:7px"></div>
<div id="flash" align="left" ></div>
<div id="display" align="left"></div>
</td>
</tr>
</table>
</div>
</body>
</html>
insert.php <?php
$dbHost = 'localhost'; // usually localhost
$dbUsername = 'root';
$dbPassword = 'admin1234';
$dbDatabase = 'test';
$db = mysql_connect($dbHost, $dbUsername, $dbPassword)
or die ("Unable to connect to Database Server.");
mysql_select_db ($dbDatabase, $db) or die ("Could not select database.");
$sql_check = mysql_query("SELECT * FROM messages order by msg_id desc");
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);
}
?>
<table cellpadding="0" cellspacing="0" width="500px">
<tr>
<td style="padding:14px;" align="left">
<b><?php echo $r['msg']; ?></b>
</td>
</tr>
</table>
Download Demo |
Cheers,
Jeffry Susanto – Web Developer – Melbourne
http://www.jsusanto.com/
One Response
Leave a Reply
Wall Me
Latest on Mon, 02:46 am
: Hi there, Have you already defined blogger_blog.comments.latest_comment_limit in the config.yml? Once you declare that, it will solve the issue. Cheers, JSusanto
: Hi thank you for this tutoriel really helpful! But I have an issue to put the comments into the sidebar. This is the massage I receive when [...]
: Hi All, please leave me your thoughts.
©2011 - 2013 JSusanto
It’s a nice post.