jquery/ajax form another div refresh - php

Question

I would start with my code...
<script type="text/javascript">
$(document).ready(function(){
$("#cForm").validate({
debug: false,
rules: {
name: "required",
email: {
required: true,
email: true
},
comment: "required"
},
messages: {
name: "Empty.",
email: "Invalid email.",
comment: "Empty.",
},
submitHandler: function(form) {
// do other stuff for a valid form
$.post('process.php', $("#cForm").serialize(), function(data) {
$('#results').html(data);
});
}
});
});
The above code is working fine with the form below, and giving success message out of my process.php fine into div with id results but i have another div before that with id comments which selects and displays the data from the same table where this ajax/jquery form stores the data...I want to refresh that with the latest changes when the form is submitted..have a look at my code first.
<div id="comments">
<h2>Comments</h2>
<?php
$query3 = "SELECT name, c_c, c_date FROM blog_comments WHERE art_id='$id'";
$result3 = #mysql_query($query3);
while($rr=mysql_fetch_array($result3))
{
echo '<div class="comen">';
echo "<h3>";
echo $rr['name'];
echo "</h3>";
echo "<h4>";
echo $rr['c_date'];
echo "</h4>";
echo "<p>";
echo $rr['c_c'];
echo "</p>";
echo '</div>';
}
mysql_close();
?>
</div>
<p>Post your comments. All fields are obligatory.</p>
<div id="results"></div>
<form action="" id="cForm" name="cForm" method="post" class="cform">
<table>
<tr><td><label for="name" id="name_label">Name</label></td><td><input type="text" name="name" id="name" size="30" /></td></tr>
<tr><td><label for="email" id="email_label">Email</label></td><td><input type="text" name="email" id="email" size="30" /></td></tr>
<tr><td><label for="comment" id="comment_label">Comment</label></td><td><textarea name="comment" id="comment" cols="30" rows="5"></textarea></td></tr>
<tr><td><input type="hidden" name="idi" value="<?php echo $id ?>" /></td></tr>
<tr><td></td><td><input type="submit" name="submit" value="Submit" /></td></tr>
</table>
</form>
and my process php looks like this
if (isset($_POST['submit']))
{
include ('databas/conektion.php');
function escape_data ($data)
{
global $con;
if (ini_get('magic_quotes_gpc'))
{
$data = stripslashes($data);
}
return mysql_real_escape_string($data,$con);
}
if (empty($_POST['name']))
{
$n = FALSE;
echo '<p>Invalid name</p>';
}
else
{
$n = escape_data($_POST['name']);
}
if (empty($_POST['email']))
{
$e = FALSE;
echo '<p>Invalid Email</p>';
}
else
{
$e = escape_data($_POST['email']);
}
if (empty($_POST['comment']))
{
$c = FALSE;
echo '<p>Invalid Comments</p>';
}
else
{
$c = escape_data($_POST['comment']);
}
$id = $_POST['idi'];
if($n && $e && $c)
{
$query2 = "INSERT INTO blog_comments (name, c_email, c_c, art_id, c_date) VALUES ('$n', '$e', '$c', '$id', NOW())";
$result2 = #mysql_query($query2);
if($result2)
{
echo '<p>Your comments have been posted successfully.</p>';
}
else
{
echo '<p>System Error</p><p>' . mysql_error() . '</p>';
}
mysql_close();
}
else
{
echo '<p style="color:red">Please try again.</p>';
}
}
?>
what i want to do is refresh div with id comments, once form is submitted.what changes should i make in my code...thanks!!

Answer 1

Create a new file called comments.php (with source code of your comments block)
Initially load comments
$(document).ready(function() { $("#comments_div").load("comments.php"); });
Then when you want to refresh, just call $("#comments_div").load("comments.php");
ie. from your first given code
submitHandler: function(form) {
// do other stuff for a valid form
$.post('process.php', $("#cForm").serialize(), function(data) {
$('#results').html(data);
$("#comments_div").load("comments.php");
});
}
EDIT:
If you have an ID in your url, then replace
$("#comments_div").load("comments.php");
with
$.get("comments.php", {"id": "<?=(0+$_GET['id'])?>"},
function(response) {
$("#comments_div").html(response);
}
);
Where your_id is the name of GET parameter.
EDIT2:
So how about if you try something like:
$.get("comments.php", {id: <?php echo (0+$_GET['id']); ?>},
function(response) {
$("#comments_div").html(response);
}
);

Answer 2

Thanks bro for your help,,and giving me so much time...my head tags look like this altogether now...
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title><?php echo $page_title; ?></title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"> </script>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(document).ready(function(){
$("#cForm").validate({
debug: false,
rules: {
name: "required",
email: {
required: true,
email: true
},
comment: "required"
},
messages: {
name: "Empty.",
email: "Invalid email.",
comment: "Empty.",
},
submitHandler: function(form) {
// do other stuff for a valid form
$.post('process.php', $("#cForm").serialize(), function(data) {
$('#results').html(data);
$.get("comment.php", {"id": "<?=(0+$_GET['id'])?>"},
function(response) {
$("#comment").html(response);
}
);
});
}
});
});
</script>
<script type="text/javascript">
$(document).ready(function() { $.get("comment.php", {"id": "<?=(0+$_GET['id'])?>"},
function(response) {
$("#comment").html(response);
}
); });
</script>
</head>