Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

gidaban79's avatar

Comment System with Jquery effects ?

Hello Guys,

i'm looking for some inspiration to my project. I want to add comments under blog post. i wondering if somebody do something similar?

After add comment, this entry will scroll down under textarea field?

0 likes
1 reply
gidaban79's avatar

Okay what i have for now.

$(function () {
    toastr.options = {
        closeButton: true,
        progressBar: true,
        showMethod: 'slideDown',
        timeOut: 2500
    };
    "use strict";
    $('[data-action="add-comment"]').on('click', function () {
        var commentText = $('textarea#comment');
        commentText.css('border', '1px solid rgba(0,0,0,.15)');
        var commentMin = 4;
        var parent_id = $('#parent_id').val();
        var commentList = $('.comment-list');
        var commentTemplate = '<div class="media mb-4"><img src="{avatar}" class="d-flex mr-3 rounded-circle" alt="{user}"><div class="media-body"><p class="mt-0"><i class="fa fa-user"></i> {user}, <i class="fa fa-calendar"></i> {date}</p><small>{comment}</small></div></div>';
        $(':input[type="submit"]').prop('disabled', true);
        if (commentText.val() == '') {
            toastr.error('Comment field can\'t be empty!');
            setTimeout(function () {
                $(':input[type="submit"]').prop('disabled', false);
            }, 2650);

        } else if (commentText.val().length <= commentMin) {
            toastr.error('Comment field must have more than ' + commentMin + ' characters!');
            setTimeout(function () {
                $(':input[type="submit"]').prop('disabled', false);
            }, 2650);
        } else {
            $.ajax({
                url: '/user/comments/',
                type: 'POST',
                data: {
                    _token: $('meta[name="csrf-token"]').attr('content'),
                    _method: 'POST',
                    comment: commentText.val(),
                    parent_id: parent_id
                },
                success: function (response) {
                    if (response.error) {
                        commentText.css('border', 'solid 1px #bd362f');
                        toastr.error(response.message);
                        setTimeout(function () {
                            $(':input[type="submit"]').prop('disabled', false);
                        }, 2650);
                    } else {
                        var comment = commentTemplate;
                        comment = comment.replace(/\{avatar\}/g, response.avatar);
                        comment = comment.replace(/\{user\}/g, response.user);
                        comment = comment.replace(/\{comment\}/g, response.comment);
                        comment = comment.replace(/\{date\}/g, response.date);
                        toastr.success(response.message);
                        commentText.val('');
                        commentList.prepend(comment).slideDown(2000);
                        setTimeout(function () {
                            $(':input[type="submit"]').prop('disabled', false);
                        }, 2650);
                    }
                }
            });
        }
        return false;
    });

});

i add .slideDown(2000) effect but still my last comment is showed immediately after hit button.

1 like

Please or to participate in this conversation.