Ajax comments (Comments Work)

More Craft plugins

Views Work
Track pageviews and content popularity in Craft CMS
Craft CMS Poll plugin
This plugin has been abandoned and no upgrade for Craft 5.x is planned!
Reactions Work
Add Facebook/linked style reactions to your Craft CMS content
Yard Reports for Craft CMS
Export Sprout Forms as Excel CSV reports

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>