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

JavaScript
1

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
}
?>
2

Instead of prepend which will overwrite anything within the “post_comment” class use prependTo() which appends the HTML you want to the “post_comment” class.

$(structure).prependTo(".post_comment");
3

@SgtLegend, thanks , but after post a comment, it still show the newest comment in all the .post_comment.

4

Sorry forgot to add :first to it

$(structure).prependTo(".post_comment:first");
5

@SgtLegend, this time, all the current post show in the first div.post_comment. but I need the current posted comment only will be showed in its own <div class=“post_comment”></div>.
For my poor English, may be not write clearly, this is the first two article’s html code output from the php mysql query circle.


<div class="articlewarp">
<div class="articlecontent">
<!--first article content-->
</div>
<form id="postform" class="postform">
<input type="hidden" name="title" id="title" value="first article title" />
<input type="text" name="content" id="content" />
<input type="button" value="Submit" class="Submit" />
</form>
<div class="post_comment">
<!-- if this div.postform submit, the current posted comment will be showed in here -->
<div class="comment_date_added">Monday 31 January 2011, 3:58 pm</div>
<div class="comment_content">aaa</div>
</div>
</div><!--first  div.articlewarp end-->

<div class="articlewarp">
<div class="articlecontent">
<!--second article content-->
</div>
<form id="postform" class="postform">
<input type="hidden" name="title" id="title" value="second article title" />
<input type="text" name="content" id="content" />
<input type="button" value="Submit" class="Submit" />
</form>
<div class="post_comment">
<!-- if this div.postform submit, the current posted comment will be showed in here -->
<div class="comment_date_added">Monday 31 January 2011, 1:23 pm</div>
<div class="comment_content">ccc</div>
<div class="comment_date_added">Monday 31 January 2011, 1:22 pm</div>
<div class="comment_content">bbb</div>
</div>
</div><!--second  div.articlewarp end-->
6

bump up

7

Sorry apparently your other post didn’t come up as new on my end, if i understand correctly you want it to that .post_comment keeps been regenerated for each new comment.

Is that correct?

8

@SgtLegend, yes, as I wish , every current comment post will show in its own div.post_comment, because they are 10 different articles. and one comment list for one article. one new comment submit should be showed after its own article.

9

Try this

$(function() {
    $(".Submit").click(function() {
        var form    = $(this).closest('form');
        var title   = form.find("#title").val();
        var content = form.find("#content").val();
        
        $.ajax({
            type    : "POST",
            url     : "ajax_post.php",
            data    : {title: title, content: content},
            success : function(date_added) {
                if (date_added != 0) {
                    // Make a clone of the post_comment element
                    $('.post_comment').clone().after(form);
                    $('.post_comment:first').find('.comment_date_added').html(date_added);
                    $('.post_comment:first').find('.comment_content').html(content);
                }
            }
        });
    });
});
10

@SgtLegend, Thanks a lot. I have solved the problem.

Added

var this_form = $(this);

And changed

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

to

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

$(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);
                }
            }
        });
    });
});