chamilo/chamilo-lms

{% autoescape false %}
    {% set nodeParams = {
        'id': resource.resourceNode.id,
        'cid': course.id,
        'sid': session ? session.id : 0,
        'type' : type,
        'tool' : tool
    } %}
    <form id="add_comment" class="form--inline" method="post" action="{{ url('post_resource_comment', nodeParams) }}">
        {{ form_widget(comment_form) }}
    </form>
    <script>
        $(function(){
            var commentForm = $('#add_comment');
            commentForm.submit(function(event) {
                $.ajax({
                    type: $(this).attr('method'),
                    url: $(this).attr('action'),
                    data: $(this).serialize(),
                    beforeSend: function() {
                        commentForm.find('button').prepend('<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>&nbsp;');
                    },
                    success: function (val) {
                        commentForm.find('.spinner-border').remove();
                        commentForm.find('textarea').val('');

                        var createdAt = moment(val.created_at).fromNow();
                        var comment = '<p>' + val.content + ' ' + val.author.username +' - '+createdAt+'</p>';

                        $(comment).prependTo($("#comment_list"));
                    },
                });

                event.preventDefault();
            });

            $('#comments-tab').on('click', function(event) {
                $.ajax({
                    dataType: "json",
                    url: '{{ url('get_resource_comments', nodeParams) }}&orderBy=createdAt',
                    beforeSend: function() {
                        $("#comment_list").html('<div class="spinner-border" role="status"></div>');
                    },
                    success: function (data) {
                        var items = [];
                        $.each(data, function(key, val) {
                            var createdAt = moment(val.created_at).fromNow();
                            items.push( '<p>' + val.content + ' ' + val.author.username +' - '+createdAt+'</p>' );
                        });
                        $("#comment_list").html(items.join(''));
                    },
                });
            });
        });
    </script>

    <div id="comment_list">
    </div>
{% endautoescape %}