How to show jquery ajax data correctly when it include in a php mysql query

Question

I want to add a comment system after my article, <form id="postform" class="postform"> is written into a MYSQL_QUERY result circle. but after post a comment, the current posted comment will be showed in all the <div class="post_comment"></div>, how to modify jquery ajax part so that the current posted comment only be showed in its own <div class="post_comment"></div>? thanks.

jquery ajax part

$(document).ready(function(){
$(".Submit").click(function(){
var title    = $(this).closest('form').find("#title").val();
var content   = $(this).closest('form').find("#content").val();
$.ajax({
type: "POST",
url: "ajax_post.php",
data: {title:title,content:content},
success: function(date_added){
if(date_added != 0)
{
var structure = '<div class="comment_date_added">'+date_added+'</div><div class="comment_content">'+content+'</div>';        
$(".post_comment").prepend(structure);
}
}
});
});
});

PHP part

<?php
...
while($result = mysql_fetch_array($resultset))
{
$article_title = $result['article_title'];
...
?>
<form id="postform" class="postform">
<input type="hidden" name="title" id="title" value="<?=$article_title;?>" />
<input type="text" name="content" id="content" />
<input type="button" value="Submit" class="Submit" />
</form>
<div class="post_comment">
<?php
$resultSet = @mysql_query("select * from customcomment where article='".$article_title."' order by date_added desc");
while($resultRow = mysql_fetch_array($resultSet))
{
$date_added = $resultRow['date_added'];
$comment = stripslashes($resultRow['content']);
?>
<div class="comment_date_added"><?=$date_added;?></div><div class="comment_content"><?=$comment;?></div>
<?php
}
?>
</div>
...
<?php
}
?>

Answer 1

The easist solution is the following.

$(document).ready(function () {
    $(".Submit").click(function () {
        var title = $(this).closest('form').find("#title").val();
        var content = $(this).closest('form').find("#content").val();
        var this_form = $(this);
        $.ajax({
            type: "POST",
            url: "ajax_post.php",
            data: {
                title: title,
                content: content
            },
            success: function (date_added) {
                if (date_added != 0) {
                    var structure = '<div class="comment_date_added">' + date_added + '</div><div class="comment_content">' + content + '</div>';

                   $(this_form).parent().next(".post_comment").prepend(structure);
                }
            }
        });
    });
});

Change is Added

var this_form = $(this);

And changed

$(".post_comment").prepend(structure);

to

$(this_form).parent().next(".post_comment").prepend(structure);

More solutions (elegant one):

In this method we need a unique value depends on the article, and no, article title wont be enough because it will be too big and could have invalid charaters.

So first question is how to generate that unique key.

If you already have an auto increment primary key, then it can be used. But it is not recommended.

Secondly, you can generate a unqiue key at the time of creation of the article and save it in the article table as article_key or something. A 8-12 charater alpha numeric value can be considered as a good unique key.

Or, if you can't change the database, you can create this unique key at the time of displaying.

Then, Change the php to

<?php
    ...
    while($result = mysql_fetch_array($resultset))
    {
        $article_title = $result['article_title'];
        $article_key = $result['article_key']; // or generateRandomKey ();
        ...
?>
        <form id="postform" class="postform">
            <input type="hidden" name="title" id="title" value="<?=$article_title;?>" />
            <input type="hidden" name="article_key" id="article_key" value="<?=$article_key;?>" />
            <input type="text" name="content" id="content" />
            <input type="button" value="Submit" class="Submit" />
        </form>
        <div class="post_comment" id="article_<?=$article_key;?>" >
<?php
        $resultSet = @mysql_query("select * from customcomment where article='".$article_title."' order by date_added desc");
        while($resultRow = mysql_fetch_array($resultSet))
        {
            $date_added = $resultRow['date_added'];
            $comment = stripslashes($resultRow['content']);
?>
            <div class="comment_date_added"><?=$date_added;?></div><div class="comment_content"><?=$comment;?></div>
<?php
        }
?>
        </div>
        ...
<?php
    }
?>

And the js to

$(document).ready(function () {
    $(".Submit").click(function () {
        var title = $(this).closest('form').find("#title").val();
        var content = $(this).closest('form').find("#content").val();
        var article_key = $(this).closest('form').find("#article_key").val();
        $.ajax({
            type: "POST",
            url: "ajax_post.php",
            data: {
                title: title,
                content: content,
                article_key: article_key
            },
            success: function (date_added) {
                if (date_added != 0) {
                    var structure = '<div class="comment_date_added">' + date_added + '</div><div class="comment_content">' + content + '</div>';
                    $(".post_comment #article_" + article_key).prepend(structure);
                }
            }
        });
    });
});

Answer 2

var structure = '<div class="post_comment"><div class="comment_date_added">'+date_added+'</div>
<div class="comment_content">'+content+'</div></div>';
$(".post_comment").before(structure);

.before in front of the object.
.after will place it after the object (if you want that)