SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Member
    Join Date
    Jan 2011
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

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

    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
    Code:
    $(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
    Code:
    <?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. #2
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,191
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    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.

    Code JavaScript:
    $(structure).prependTo(".post_comment");

  3. #3
    SitePoint Member
    Join Date
    Jan 2011
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @SgtLegend, thanks , but after post a comment, it still show the newest comment in all the `.post_comment`.

  4. #4
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,191
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    Sorry forgot to add :first to it

    Code JavaScript:
    $(structure).prependTo(".post_comment:first");

  5. #5
    SitePoint Member
    Join Date
    Jan 2011
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @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.

    Code:
    <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. #6
    SitePoint Member
    Join Date
    Jan 2011
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    bump up

  7. #7
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,191
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    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. #8
    SitePoint Member
    Join Date
    Jan 2011
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @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. #9
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,191
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    Try this

    Code JavaScript:
    $(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. #10
    SitePoint Member
    Join Date
    Jan 2011
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @SgtLegend, Thanks a lot. I have solved the problem.

    Added
    Code:
    var this_form = $(this);
    And changed
    Code:
    $(".post_comment").prepend(structure);
    to
    Code:
    $(this_form).parent().next(".post_comment").prepend(structure);
    Code:
    $(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);
                    }
                }
            });
        });
    });


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •