Facebook 风格评论框

Question

我有这样的推文和评论系统

这是一组推文及其评论和评论框的代码块:

<li class="storyBlock">
  <div>
    <div class="grid userImageBlockL">
      <div class="imgMedium"> <a href="/bakasura1/users/harshamv"><img width="44" height="44" alt="image" src="/bakasura1/files/images/medium/1288170363aca595cabb50.jpg"></a> </div>
    </div>
    <div class="grid userContentBlockL">
      <div class="userContentHeader">
        <h5> <a href="/bakasura1/users/harshamv">Harsha Vantagudi</a> <span class="storyMessage">Testing the Seconds</span></h5>
        <span class="user-status-time">6 hours ago</span> <span><a href="#" class="user-status-buttons">Comment</a> <a href="#" class="user-status-buttons">Delete</a></span> </div>
      <ul class="commentList">
        <li class="commentBlock">
          <div>
            <div class="grid userImageBlockS">
              <div class="imgSmall"> <a href="/bakasura1/users/harshamv"><img width="35" height="35" alt="image" src="/bakasura1/files/images/small/1288170363aca595cabb50.jpg"></a> </div>
            </div>
            <div class="grid userContentBlockS alpha omega">
              <h5> <a href="/bakasura1/users/harshamv">Harsha Vantagudi</a> <span class="storyMessage">Write your comment...</span></h5>
              <span class="user-status-time">27 minutes ago</span> <span><a href="#" class="user-status-buttons">Comment</a> <a href="#" class="user-status-buttons">Delete</a></span></div>
            <div class="clear"></div>
          </div>
        </li>
        <li class="commentBlock">
          <div>
            <div class="grid userImageBlockS">
              <div class="imgSmall"> <img width="35" height="35" alt="image" src="/bakasura1/files/images/small/1288170363aca595cabb50.jpg"> </div>
            </div>
            <div class="grid userContentBlockS alpha omega">
              <form accept-charset="utf-8" action="/bakasura1/account/saveComment" method="post">
                <div style="display: none;">
                  <input type="hidden" value="POST" name="_method">
                </div>
                <input type="hidden" id="StatusMessageReplyPid" value="67" name="data[StatusMessageReply][pid]">
                <input type="hidden" id="StatusMessageReplyItemId" value="1" name="data[StatusMessageReply][item_id]">
                <input type="hidden" id="StatusMessageReplyCommentersItemId" value="1" name="data[StatusMessageReply][commenters_item_id]">
                <textarea id="StatusMessageReplyMessage" name="data[StatusMessageReply][message]">Write your comment...</textarea>
                <input type="submit" name="" value="Comment">
              </form>
            </div>
            <div class="clear"></div>
          </div>
        </li>
      </ul>
    </div>
    <div class="clear"></div>
  </div>
</li>

我对保存评论时如何从提交创建 Ajax 感到有点困惑，新评论应该从上到下堆叠。因为没有唯一的推文标识符。我不知道如何解决这个问题。

有人可以推荐一种简单的解决方案吗？

Answer 1

http://demos.99points.info/facebook_wallpost_system/

那里有很好的演示和教程