The attached add-on files may be out of date.  Please visit Devot-ee for the latest versions.

This plugin uses AJAX to submit comments. Supports pagination, scrolling newly submitted
comment into view and triggering search for certain comment through URL.

I. THE TAG exp:ajax_babble:script

This is a *single* tag.

PARAMETERS

1) form_id - required. Allows you to specify CSS id parameter of the form outputted by
exp:comment:form tag. Usually its value will be “comment_form”.

2) entry_id - required. Allows you to specify ID number of the entry being commented on.

3) comments_template_url - required. Allows you to specify URL of the comment template.
You must specify full URL, i.e. starting with “http”. This parameter accepts inside its value
the following ExpressionEngine variables: site_id, site_url, site_index, homepage.

4) comments_container_id - required. Allows you to specify CSS id parameter of the HTML element
inside which AJAX should output comments.

5) submit_button_id - required. Allows you to specify CSS id parameter of the submit button of the
comment form.

6) comments_number_id - optional. Allows you to specify CSS id parameter of the HTML element
inside which number of comments is displayed; this number will be updated when AJAX will submit a new
comment. This parameter supports pipe operator.

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.

8) preview_template_url - optional. Allows you to specify URL of the preview template.
You must specify full URL, i.e. starting with “http”. This parameter accepts inside its value
the following ExpressionEngine variables: site_id, site_url, site_index, homepage.

9) preview_container_id - optional. Allows you to specify CSS id parameter of the HTML element
inside which AJAX should output comment preview.

10) preview_button_id - optional. Allows you to specify CSS id parameter of the preview button of the
comment form.

11) comments_progress_indicator_id - optional. Allows you to specify CSS id parameter of the HTML element
which will act as the indicator of comments being loaded.

12) preview_progress_indicator_id - optional. Allows you to specify CSS id parameter of the HTML element
which will act as the indicator of comment preview being loaded.

13) progress_indicator_class - optional. Allows you to specify CSS class parameter of the HTML element
which will act as the indicator of comments or comment preview being loaded.

14) comments_error_message_id - optional. Allows you to specify CSS id parameter of the HTML element
inside which an error message outputted when AJAX tried to load comments will be displayed.

15) preview_error_message_id - optional. Allows you to specify CSS id parameter of the HTML element
inside which an error message outputted when AJAX tried to load comment preview will be displayed.

16) error_message_class - optional.  Allows you to specify CSS class parameter of the HTML element
inside which an error message outputted when AJAX tried to load comments or comment
preview will be displayed.

17) 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. This parameter supports pipe character, i.e. you can add several callback functions.

18) 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. This parameter supports pipe character, i.e. you can add several callback functions.

19) any name of javascript function which is used inside the value of “add_callback_submit” parameter or
“add_callback_paginate” parameter can be used as the name of a new parameter. The value of this parameter will
be used as argument of the relevant javascript function. E.g. if you have parameter

then you can add parameter

the number “5” will be used as the argument for “my_calback” function.
In case you need to call a function with several arguments, use javascript object.  E.g. if you have parameter

Continued in the next post.

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)

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

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!

smartpill - 27 April 2010 12:11 AM

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?

It’s simple.

Create anywhere on the main template a function:

Then add this parameter to exp:ajax_babble:script tag:

Laisvunas - 27 April 2010 12:11 PM

smartpill - 27 April 2010 12:11 AM

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?

It’s simple.

Create anywhere on the main template a function:

< sript >
function my_callback() {
alert("New comment submitted!");
}
</ script > 

Then add this parameter to exp:ajax_babble:script tag:

add_callback_submit="my_callback" 

Ah. OK, it works if I put the function in the same template, but not if I put it in the main linked script, which is linked in the header, so I thought it should work. Is this a parsing order issue?

OK, it works if I put the function in the same template, but not if I put it in the main linked script, which is linked in the header, so I thought it should work.

What do you mean by putting “it in the main linked script, which is linked in the header”?

Laisvunas - 27 April 2010 02:08 PM

OK, it works if I put the function in the same template, but not if I put it in the main linked script, which is linked in the header, so I thought it should work.

What do you mean by putting “it in the main linked script, which is linked in the header”?

I have a template named entry which has jquery and my main site script (js_spd) externally linked in the header which contains the function.

within spd_js script is

Then the template with the weblog:entries and ajax:babble is embedded into that.

When I try

add_callback_submit=“comAway”

like that, I get errors (see screenshot), when I put the function directly into the _center template above {exp:ajax_babble:script…} tag, it works.