按Enter键将textarea数据附加到评论帖

时间:2014-07-03 19:15:54

标签: javascript php jquery

我正在创建一个评论系统,其结构如下所示:

<div id="main_comment_DIV_id_no">
     //Some user comment
</div>
<div "reply_DIV">
    <textarea name="reply_comment" id="reply_comment" rows="1" style="width:100%">
    </textarea>
</div>

我想在按Enter键的同时将textarea数据附加到主注释(也更新数据库)部分。

如果只有一个(或几个)DIV s,我可以轻松完成此操作,但此处我有nDIV个号,所以我正在寻找一个追加的解决方案第n个仅向第n个main_comment_DIV回复数据。

任何帮助都非常有用吗?

2 个答案:

答案 0 :(得分:0)

这是逻辑。这可能对你有帮助。 当您单击enter时,调用ajax函数并使用它传递reply_comment。在php端,将该注释添加到数据库中并从数据库中获取所有消息。关于ajax的成功,

$('#main_messages_container').html(null);
$('#main_messages_container').html(res);

这将为您提供所有更新的新消息。在这种情况下,您不需要附加任何div容器。

详细答案:

$('#enter_key_button').on('click',function(){
$.ajax({
        type: 'post',
        url: 'process.php',
        data: {textarea : textarea},
        success: function (res) {
            //alert(res);
            $('#main_messages_container').html(null);
            $('#main_messages_container').html(res);
        }
    });
});

答案 1 :(得分:0)

您可以尝试使用keyup事件和jquery类选择器。你不应该使用id作为选择器,因为你说你有n个主要评论潜水,所以n个div的id不应该相同。

  <body>
    <script type="text/javascript">
        $(document).ready(function(){
            $('[name="reply_comment"]').keyup(function(e){
                if(e.which === 13){
                    var comment = $(e.currentTarget).val(),
                    commentDiv = $('.main_comment_DIV_id_no');
                    //you have the comment here, so you can call an ajax request to update it in the database.
                       $(e.currentTarget).val("");
                     //if the blank div where you want to add the comment is already present, then write
                      $(commentDiv[commentDiv.length-1]).text(comment);
                 // Else no need to add the blank div initially, just create a new div and add the comment there.
                  $(commentDiv[commentDiv.length-1]).after('<div class="main_comment_DIV_id_no">'+comment+'</div>');
                }

            })

        })

    </script>
    <div class="main_comment_DIV_id_no">
        Some user comment
    </div>
    <div class="main_comment_DIV_id_no">
        Some user comment2
    </div>
    <div class="main_comment_DIV_id_no">

    </div>
    <div id="reply_DIV">
        <textarea name="reply_comment" id="reply_comment"   rows="1"  style="width:100%" ></textarea>
    </div>
</body>