jquery/ajax form another div refresh

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>