0

私はjqueryを使用してfacebookのようなコメントで作業していますが、すべてを行っていますが、ユーザーが新しいコメントを追加するとコンテンツが変更されないという問題に直面しましたか? .clone()jquery でメソッドを使用しようとしていますが、機能しませんか? 私がしなければならないこと？

JQuery コード:

<script>
        jQuery(document).ready(function() {
            var form = $('.form');
            $('.normal').autosize();
            $('.animated').autosize({append: "\n"});

            form.on('submit', function(e) {
                var comment = $('.normal').val();
                e.preventDefault();

                $.ajax({
                    url: 'ajax_comment.xhtml',
                    type: 'POST',
                    cache: false,
                    data: form.serialize(), //form serizlize data
                    complete: function(jqXHR, textStatus) {
                        $('.comment').text(comment);
                        $('.name').text('Danial');
                    },
                    success: function(data) {
                        var item = $(data).hide().fadeIn(800);

                        $('.posts-items').append(item).addClass(this);

                        form.trigger('reset');
                    },
                    error: function(e) {
                        alert(e);
                    }
                });
            });
        });
    </script>

HTML コード:

    <form class="form" method="post"> 
        <textarea placeholder="Write your post here ..." class="normal"/>
        <br/>
        <input class="postBtn" name="submit" type="submit" value="Post" />
    </form>

    <div class="posts-items">

    </div>

ajax_comment.xhtml

<head>
    <title></title>
    <style type="text/css">
        .comment-item{
            width: 300px;
            height: 50px;
            overflow: hidden;
            background-color: #123456;
        }
        .name{
            padding-left: 5px;
            color: white;
        }
        .comment{
            padding-left: 5px;
            color: white;
        }
        .image{
            width: 50px;
            height: 50px;
        }
        .left{
            width: 50px;
            height: 50px;

            float: left;
            background: #ccc;
        }
        .right{
            float: right;
            width: 250px;
            height: 50px;
            background: #888;
        }
    </style>
</head>
<body>
    <div class="comment-block">
        <div class="comment-item">
            <div class="left">
                <img class="image" src="default.gif" alt="image"/>
            </div>
            <div class="right">
                <div class="name">Name</div>
                <div class="comment">Message</div>
            </div>
        </div>
        <div style="margin-top: 5px;"></div>
    </div>
</body>
4

0 に答える 0