Comments Work v1.1.5
Easy to use commenting for Craft CMS
More Craft plugins

Ajax comments

Ajax / Json endpoint

If you want to handle comment submission through Ajax, you can use the Ajax/XHR endpoint (since version 1.1.5).

The action url for this is: actions/comments-work/default/xhr-post-comment

The response returns a simple 'success' flag to indicate wether the post was successful.


Code sample in jQuery for Ajax comments

A prototypic code sample in javascript would look like this. Based on what we have actually in production.


javascript:
// handles submission of a comment form with ajax.
// listens to forms with css class js-commentworks-xhr-form
// note this is ECMA2015 style, you'd need Babel, Webpack - a transpiler to convert it to common javascript.

const prefix = 'commentworks';
$(document).on('submit', `form.js-${prefix}-xhr-form`, function(e) {
        e.preventDefault();
        const
            $this = $(this),
            action = $this.attr(`data-${prefix}-xhr-action`),
            loadCommentsUri = $this.attr(`data-${prefix}-xhr-loadcomments-uri`),
            selector = $this.attr(`data-${prefix}-comments-selector`),
            $selector = $(selector),
            data = $this.serialize()
        ;
        $this.find($(':input').prop('disabled', true));
        $.ajax({
            url: action, method: 'POST', data: data,
            success: function(result) {
                if ((result.success ?? false) && loadCommentsUri) {
                    $selector.load(loadCommentsUri);
                } 
                $this.trigger('reset');
                $this.find($(':input').prop('disabled', false));
            }
        });
    });
Twig
    {#
    commentworks xhr form

    data-commentworks-xhr-action: xhr post url for comment works
    data-commentworks-xhr-loadcomments-uri: url to reload comments after posting
    data-commentworks-comments-selector: (jquery) selector for the div to load the comments in after posting
    #}
    <div class="comment-form">
        {% set xhr_action_uri = url('actions/comments-work/default/xhr-post-comment') %}
        {% set xhr_loadcomments_uri = url('....') %}
        <form
                data-commentworks-xhr-action="{{ xhr_action_uri }}"
                data-commentworks-xhr-loadcomments-uri="{{ xhr_loadcomments_uri }}" ,
                data-commentworks-comments-selector="#{{ comments_id }}"
                method="POST"
                class="js-commentworks-xhr-form"
        >
            {{ csrfInput() }}
            {{ signCommentForm(blog) }}
            <input name="elementId" value="{{ blog.id }}" type="hidden"/>
            <input name="siteId" value="{{ blog.siteId }}" type="hidden"/>
            <input name="commentFormat" value="text" type="hidden"/>

            <input name="comment" type="text" placeholder="Laat een comment achter"/>
            <button type="submit" class="btn btn-width-small btn-danger btn-xs" type="submit">Verstuur</button>
        </form>
    </div>