Plugin: AJAX Babble

II. THE TAG exp:ajax_babble:comments

This is a tag pair used to wrap the tag exp:comment:entries.

PARAMETERS

1) entry_id - required. This parameter must have the value {embed:entry_id}

2) limit - optional. Allows you to specify how many comments should be displayed on one page. Default is 100. This parameter must have exactly the same value as “limit” parameter of exp:comment:entries tag which is wrapped by exp:ajax_babble:comments tag.

3) max_pagination_links - optional. Allows you to specify how many pagination links should be displayed. Default value is “2”.

4) sort - optional. Allows you to specify how - ascendingly (asc) or descendingly (desc) - comment entries should be sorted. Default value is “desc”. This parameter must have exactly the same value as “sort” parameter of exp:comment:entries tag which is wrapped by exp:ajax_babble:comments tag.

5) orderby - optional. This parameter sets the display order of the comments. Possible values are: date, email, location, name, url. Default id “date”. This parameter must have exactly the same value as “orderby” parameter of exp:comment:entries tag which is wrapped by exp:ajax_babble:comments tag.

6) search_trigger - optional. Allows you to specify the string in url which will trigger the search for certain comment. E.g. if this parameter has the value “comment_”, then in case some segment is, say, “comment_255”, the search will be triggered for the comment having ID number 255.

7) css_id_to_scroll - optional. Allows you to specify CSS id parameter of the comment which will be scrolled into view after AJAX will load comments. Into view will be scrolled either the newly submitted comment or the comment which was found by the search triggered by URL. The value of this parameter must be the same as the value of identically named parameter of exp:ajax_babble:script tag.

8) parse - required. This parameter must have the value “inward”.

VARIABLES

1) ajax_babble_entry_id - outputs entry_id number of the entry comments belong to. Used as the value of of exp:comment:entries tag which is wrapped by exp:ajax_babble:comments tag.

2) ajax_babble_comment_id_to_scroll - comment id of the newly submitted comment or comment id of the comment the search was triggered for by the string in URL. Used inside conditional which outputs CSS ID parameter specified by “css_id_to_scroll” parameter of exp:ajax_babble:script tag.

3) ajax_babble_url_title - outputs url_title of the entry comments belong to.

4) ajax_babble_weblog_name - outputs short weblog name of the weblog entry being commented belongs to.

5) ajax_babble_segment_1, ajax_babble_segment_2, ajax_babble_segment_3, ajax_babble_segment_4, ajax_babble_segment_5, ajax_babble_segment_6, ajax_babble_segment_7, ajax_babble_segment_8, ajax_babble_segment_9 - outputs segments of the URL which was used to output main template.

6) ajax_babble_search_trigger_segment - outputs URL segment in which search triggering string is present.

7) ajax_babble_css_id_to_scroll - outputs the value of “css_id_to_scroll” parameter.

Continued in the next post.

III. MAIN TEMPLATE (E.G technical/for_tests)

IV. COMMENTS TEMPLATE (E.G technical/for_tests2)

<h2>Comments:</h2>

<ul>

{exp:ajax_babble:comments entry_id="{embed:entry_id}" limit="5" search_trigger="comment_" orderby="date" sort="asc" parse="inward"}

{exp:comment:entries entry_id="{ajax_babble_entry_id}" limit="5" orderby="date" sort="asc" paginate="top" dynamic="off"}

{paginate}
Page {current_page} of {total_pages} pages {pagination_links}
{/paginate}

<li {if "{ajax_babble_comment_id_to_scroll}"=="{comment_id}"}id="comment_to_scroll"{/if} class="comment-body">
<div>{absolute_count}. {url_or_email_as_author} at {comment_date format='%m/%d - %h:%i %A'} said:</div>
<blockquote>{comment}</blockquote>
</li>

{/exp:comment:entries}

{/exp:ajax_babble:comments}

</ul>

V. PREVIEW TEMPLATE (E.G technical/for_tests3)

{exp:comment:preview}

<ul>

<li>

<div>{url_or_email_as_author} at {comment_date format='%m/%d - %h:%i %A'} said:</div>

<blockquote>{comment}</blockquote>

</li>

</ul>

{/exp:comment:preview}

End of the description of plugin.

Looks great, thanks for sharing. Do you have any examples of this working on a live site?

Hi Joe,

You can test plugin here (both previewing and submitting comments). You also can trigger search for certain comment through URL by entering URLs which have as the last segment comment_430, comment_431 etc.

Hi,

I released version 1.0.10 of AJAX Babble plugin. In this version a couple minor bugs were fixed and some minor polishing of javascript was done.

@Laisvunas,

I just tested out the demo but am getting a response of “Loading comments… No response from server.” when trying to submit a comment.

I’m also getting that response too.

I also tried this on a site and couldn’t get it to submit the comments at all. I got the Loading comments message but then nothing happens and no comment gets saved :-(

Best wishes,

Mark

Hi Mark and Joe,

I just tested out the demo but am getting a response of “Loading comments… No response from server.” when trying to submit a comment.

Oops! I unintentionally disabled submitting of comments for not logged-in visitors.

Try again, now it should work correctly.

Hi,

I released version 1.0.11 of AJAX Babble plugin. In this version I enhanced javascript’s handling of EE error messages in order to prevent outputting of them inside comment container.

Hi,

I released version 1.0.12 of AJAX Babble plugin. In this version a couple of minor improvements were made in javascript this plugin outputs.

Hi,

I released version 1.1 of AJAX Babble plugin. In this release two new parameters were added to exp:ajax_babble:script tag:

1) add_callback_submit - optional. Allows you to specify name of javascript function which will be executed when AJAX response will be outputted into container after submission of the new comment.

2) add_callback_paginate - optional. Allows you to specify name of javascript function which will be executed when AJAX response will be outputted into container after clicking of some pagination link.

Another great addition to the EE arsenal.

I’ve just spent some time with v1.1 trying to get the add_callback_submit parameter to work. I’m trying to use it to call a jquery function that fades out the comment form after the comment was successfully sent and place the success/comment moderation message in its place but I keep getting and error. I’ve created a jQuery function named “comAway” but no matter how I format this I still get an error. Could you post a simple example?

This looks fantastic - as soon as I get free time (currently in extremely short supply) I will add this to my personal blog Repatriate Me!