2

概要：

投稿のリストがあり、各投稿にはコメントのリストも含まれています。投稿に直接コメントを追加するオプションがあります (Twitter のように)。これらの投稿は ajax 経由で送信します。

問題：

新しいコメントを送信すると、私が送信したものだけでなく、すべての投稿のすべての「コメント リスト」が更新されます。

何か案は？(以下のコード)

JS:

$(document).ready(function () {
    var options = {
        //clearForm: true,
        //resetForm: true,
        //beforeSubmit: ShowRequest,
        success: function (html) {
            $('.post_comment_list').prepend(html);

            $('.footer-post').hide();
            $('.comments-feed').hide();
            $('.small-textarea-main-feed').removeClass('set-large');
            resetForm($('.footer-comment'));
        },
        error: function () {
            alert('ERROR: unable to upload files');
        },
        complete: function () {

        },
    };

    $(".footer-comment").ajaxForm(options);

    function ShowRequest(formData, jqForm, options) {
        var queryString = $.param(formData);
        alert('BeforeSend method: \n\nAbout to submit: \n\n' + queryString);
        return true;
    }

    function resetForm($form) {
        $form.find('input:text, input:password, input:file, select, textarea').val('');
        $form.find('input:radio, input:checkbox')
            .removeAttr('checked').removeAttr('selected');
    }
});

PHP

       <?php 
     if (empty($_POST) === false && empty($errors) === true) {
      //register user
         $post_comment = array(
        'comment'      => $_POST['comment'],
        'id'      => $_POST['id'],
         );


        $user_id = $_SESSION['user_id'];
        post_comment_db($user_id, $post_comment);
        //print_r($post_question['tags']);
        load_comment($user_id,$post_comment);



        } else{
          echo output_errors($errors);
         }
           ?>

PHP/HTML: Li (追加するコメント)

            function load_comment($user_id,$post_comment){


          $username = mysql_result(mysql_query("SELECT `username` FROM `users` WHERE `user_id` = $user_id"), 0, 'username');
          $timestamp = mysql_result(mysql_query("SELECT `timestamp` FROM `comments` WHERE `user_id` = $user_id"), 0, 'timestamp');
           $r = format_time($timestamp);

          $question_id = $post_comment['id'];

           $q = "SELECT `comment_id` FROM `question_has_comments` WHERE `question_id` = $question_id ORDER BY `timestamp` DESC LIMIT 1" ;
           $q = "SELECT `comment_id` FROM `comments` WHERE `question_id` = $question_id ORDER BY `timestamp` DESC LIMIT 1" ;


          echo 
           '                
    <li id="" class="post_comment">                                     
        <!--  wrapper da imagem -->
        <div id="" class="give-margin">
            <div id="" class="profile-page-avatar-wrapper"> 
                <a href="#"><img id="" class="profile-page-avatar-image" src="./images/test/chemistry.jpg" alt=""></a><!--  A imagem -->
            </div>
            <!--  o botao e o texto-->

            <div id="" class="profile-page-uploader-tools"> 
                <!--  o botao -->
                <div id="" class="profile-image-btn">
                    <div id="" class="profile-page-btn-wrapper">
                        <div id="" class="header-id">
                            <a href="#"><span id="user-name">' . $username . '</span></a>   
                        </div>
                        <div id="" class="question-page-feed-answer-header-timer">
                            <a id="feed-answer-header-timer" href="#"><span class="timer" data-time="">' . $r . '</span></a>
                        </div>
                    </div> <!-- fecha Div wrapper do botao-->
                </div> 
                <!--  fecha botao 
                http://www.w3.org/TR/html-markup/Overview.html#toc-->
                <p>' . $post_comment['comment'] . '</p>
            </div>                                  
        </div>
    </li>';

}

4

1 に答える 1

2

最後のコメントへの返信で問題が特定されました:

the class "post_coment_list" is an "ol" present in all posts, where the comments to a post reside

API から:

.prepend(): 説明: パラメータで指定されたコンテンツを、一致した要素のセット内の各要素の先頭に挿入します。

コードでは、返された HTML の前に ajax 成功関数が次のように追加されます。

$('.post_comment_list').prepend(html);

$('.post_comment_list')は class を持つすべての要素のセットで.post_comment_listあり、すべての投稿にそのクラスがあるため、HTML はすべての投稿の先頭に追加されます。

これを解決するには、各投稿に一意の ID を割り当て、success 関数でその 1 つの ID だけに HTML を追加します。

その ID を取得するには、ajax 呼び出しが行われたときにそれを取得し、次のいずれかを行います。

  1. ID をグローバル変数に割り当て、成功の fn で再度取得する、または
  2. ID を他の ajax データと一緒に送信し、それを HTML と一緒に成功の fn に送り返します。例えば：

PHP側:

$post_id = $_POST['postid'];

$send_back = $post_id . '|' . '<li id="" class="post_comment">                                     
    <!--  wrapper da imagem -->
    <div id="" class="give-margin">
    etc
    ';
echo $send_back

jQuery/javascript: (成功の内部: 関数)

    var arrHTML = html.split('|');
    var postId = arrHTML[0];
    var html_code = arrHTML[1];

    $('#'+postId).prepend(html_code);

上記では、投稿 ID を PHP 側に送信する方法を示していないことに注意してください。私はあなたがそれで大丈夫だと確信しています。私が提案していることを説明するのに十分なだけを示しました。

于 2013-10-03T17:17:58.990 に答える