Multiple comment forms reloading page on comment submit

Hi @wmodes,
Thanks for your message? On which page on your website can we reproduce the problem? Can you please also post the debug messages that ware shown in the console when you post a comment as they should show the problem. The initialization looks ok.

To reproduce the problem, by leaving a comment:

1. Only registered users can comment, so you will have to register first at https://unavoidabledisaster.com/register/. Takes only a minute
2. After that go to https://unavoidabledisaster.com/
3. Scroll down to any item that has a hover effect, for instance, the duck/rabbit or the image that says Deep Thoughts.
4. Click on it to bring up a dialog bubble.
5. At the bottom of the bubble, you will see a link to comments (“Read 2 Responses”, etc). Click that.
6. In the comments modal, try leaving a comment
7. Observe that the page reloads and goes to the individual item page, rather than using AJAX (or in addition to using AJAX).

After reload the console log says the following:

wp-ajaxify-comments.js?ver=1.7.1:87 [WP Ajaxify Comments] Initializing version 1.7.1
wp-ajaxify-comments.js?ver=1.7.1:87 [WP Ajaxify Comments] Found jQuery 3.5.1
wp-ajaxify-comments.js?ver=1.7.1:87 [WP Ajaxify Comments] Found jQuery blockUI 2.7
wp-ajaxify-comments.js?ver=1.7.1:87 [WP Ajaxify Comments] Found jQuery Idle Timer plugin
wp-ajaxify-comments.js?ver=1.7.1:87 [WP Ajaxify Comments] Multiple comment form support enabled (selector: 'article')
wp-ajaxify-comments.js?ver=1.7.1:87 [WP Ajaxify Comments] Attach form...
wp-ajaxify-comments.js?ver=1.7.1:87 [WP Ajaxify Comments] Search comment form (selector: '#post-2825 #commentform')... Found: s.fn.init?[form#commentform.comment-form, prevObject: S.fn.init(1)]
wp-ajaxify-comments.js?ver=1.7.1:87 [WP Ajaxify Comments] Search comments container (selector: '#post-2825 #comments')... Found: s.fn.init?[div#comments.comments-area, prevObject: S.fn.init(1)]
wp-ajaxify-comments.js?ver=1.7.1:87 [WP Ajaxify Comments] Search respond container (selector: '#post-2825 #respond')... Found: s.fn.init?[div#respond.comment-respond, prevObject: S.fn.init(1)]
wp-ajaxify-comments.js?ver=1.7.1:87 [WP Ajaxify Comments] Search comment paging links (selector: '#post-2825 #comments [class^='nav-'] a')... Not found
wp-ajaxify-comments.js?ver=1.7.1:87 [WP Ajaxify Comments] Search comment links (selector: '#comments a[href*="/comment-page-"]')... Not found
wp-ajaxify-comments.js?ver=1.7.1:87 [WP Ajaxify Comments] Attach form...
wp-ajaxify-comments.js?ver=1.7.1:87 [WP Ajaxify Comments] Search comment form (selector: '#div-comment-32 #commentform')... Not found
WPAC._Debug @ wp-ajaxify-comments.js?ver=1.7.1:87
WPAC._DebugSelector @ wp-ajaxify-comments.js?ver=1.7.1:95
WPAC.AttachForm @ wp-ajaxify-comments.js?ver=1.7.1:289
(anonymous) @ wp-ajaxify-comments.js?ver=1.7.1:513
each @ jquery-3.5.1.min.js:2
each @ jquery-3.5.1.min.js:2
WPAC.Init @ wp-ajaxify-comments.js?ver=1.7.1:507
(anonymous) @ wp-ajaxify-comments.js?ver=1.7.1:638
e @ jquery-3.5.1.min.js:2
t @ jquery-3.5.1.min.js:2
setTimeout (async)
(anonymous) @ jquery-3.5.1.min.js:2
c @ jquery-3.5.1.min.js:2
fireWith @ jquery-3.5.1.min.js:2
fire @ jquery-3.5.1.min.js:2
c @ jquery-3.5.1.min.js:2
fireWith @ jquery-3.5.1.min.js:2
ready @ jquery-3.5.1.min.js:2
B @ jquery-3.5.1.min.js:2
wp-ajaxify-comments.js?ver=1.7.1:87 [WP Ajaxify Comments] Search comments container (selector: '#div-comment-32 #comments')... Not found
WPAC._Debug @ wp-ajaxify-comments.js?ver=1.7.1:87
WPAC._DebugSelector @ wp-ajaxify-comments.js?ver=1.7.1:95
WPAC.AttachForm @ wp-ajaxify-comments.js?ver=1.7.1:290
(anonymous) @ wp-ajaxify-comments.js?ver=1.7.1:513
each @ jquery-3.5.1.min.js:2
each @ jquery-3.5.1.min.js:2
WPAC.Init @ wp-ajaxify-comments.js?ver=1.7.1:507
(anonymous) @ wp-ajaxify-comments.js?ver=1.7.1:638
e @ jquery-3.5.1.min.js:2
t @ jquery-3.5.1.min.js:2
setTimeout (async)
(anonymous) @ jquery-3.5.1.min.js:2
c @ jquery-3.5.1.min.js:2
fireWith @ jquery-3.5.1.min.js:2
fire @ jquery-3.5.1.min.js:2
c @ jquery-3.5.1.min.js:2
fireWith @ jquery-3.5.1.min.js:2
ready @ jquery-3.5.1.min.js:2
B @ jquery-3.5.1.min.js:2
wp-ajaxify-comments.js?ver=1.7.1:87 [WP Ajaxify Comments] Search respond container (selector: '#div-comment-32 #respond')... Not found
WPAC._Debug @ wp-ajaxify-comments.js?ver=1.7.1:87
WPAC._DebugSelector @ wp-ajaxify-comments.js?ver=1.7.1:95
WPAC.AttachForm @ wp-ajaxify-comments.js?ver=1.7.1:291
(anonymous) @ wp-ajaxify-comments.js?ver=1.7.1:513
each @ jquery-3.5.1.min.js:2
each @ jquery-3.5.1.min.js:2
WPAC.Init @ wp-ajaxify-comments.js?ver=1.7.1:507
(anonymous) @ wp-ajaxify-comments.js?ver=1.7.1:638
e @ jquery-3.5.1.min.js:2
t @ jquery-3.5.1.min.js:2
setTimeout (async)
(anonymous) @ jquery-3.5.1.min.js:2
c @ jquery-3.5.1.min.js:2
fireWith @ jquery-3.5.1.min.js:2
fire @ jquery-3.5.1.min.js:2
c @ jquery-3.5.1.min.js:2
fireWith @ jquery-3.5.1.min.js:2
ready @ jquery-3.5.1.min.js:2
B @ jquery-3.5.1.min.js:2
wp-ajaxify-comments.js?ver=1.7.1:87 [WP Ajaxify Comments] Search comment paging links (selector: '#div-comment-32 #comments [class^='nav-'] a')... Not found
wp-ajaxify-comments.js?ver=1.7.1:87 [WP Ajaxify Comments] Search comment links (selector: '#comments a[href*="/comment-page-"]')... Not found
wp-ajaxify-comments.js?ver=1.7.1:87 [WP Ajaxify Comments] Initialization completed

Please note that once you are on the individual item page (https://unavoidabledisaster.com/thing/deep-stoned-thoughts/?WPACUnapproved=0&WPACUrl=https%3A%2F%2Funavoidabledisaster.com%2Fthing%2Fdeep-stoned-thoughts you can submit a comment WITHOUT reloading.

Looking at the console log results, I feel like it might be pretty obvious to you what I’m missing. But it is still a mystery to me.

• This reply was modified 4 years, 1 month ago by Wes Modes.
• This reply was modified 4 years, 1 month ago by Wes Modes.

Hi @wmodes,

I think you have to tweak the selectors for the comment form and the comment form containers as you have multiple of them and the plugin is configured to match them by ID. You need to provide another selector that matches the form and the container in the individual “article” elements.

If you still have problems, please post the console output that is generated when you submit the comment.

Best regards
Jan

Thanks, Jan. That was what I was guessing from the console output. I’ll examine the errors and see if I can provide the plugin config with the right selectors.

I’ll get back to you to tell you if it worked.

Which of these settings are you suggesting I need to modify?

1. Post container selector – Specifically says it needs an id assigned for multiple comments on a post
2. Comment form selector – Defaults to #commentform, left at default
3. Comments container selector – Defaults to #comments, left at default

I added an id for my Post Container Selector (‘.thing-content.comments’), but it still reloaded the page. Do either of the other two require a unique id?

Here’s the console output when I load the page:

[WP Ajaxify Comments] Initializing version 1.7.1
wp-ajaxify-comments.js?ver=1.7.1:87 [WP Ajaxify Comments] Found jQuery 3.5.1
wp-ajaxify-comments.js?ver=1.7.1:87 [WP Ajaxify Comments] Found jQuery blockUI 2.7
wp-ajaxify-comments.js?ver=1.7.1:87 [WP Ajaxify Comments] Found jQuery Idle Timer plugin
wp-ajaxify-comments.js?ver=1.7.1:87 [WP Ajaxify Comments] Multiple comment form support enabled (selector: '.thing-content.comments')
wp-ajaxify-comments.js?ver=1.7.1:87 [WP Ajaxify Comments] Initialization completed
jquery-migrate-3.3.0.min.js:2 JQMIGRATE: Migrate is installed, version 3.3.0
wp-ajaxify-comments.js?ver=1.7.1:87 [WP Ajaxify Comments] Initializing version 1.7.1
wp-ajaxify-comments.js?ver=1.7.1:87 [WP Ajaxify Comments] Found jQuery 3.5.1
wp-ajaxify-comments.js?ver=1.7.1:87 [WP Ajaxify Comments] Found jQuery blockUI 2.7
wp-ajaxify-comments.js?ver=1.7.1:87 [WP Ajaxify Comments] Found jQuery Idle Timer plugin
wp-ajaxify-comments.js?ver=1.7.1:87 [WP Ajaxify Comments] Multiple comment form support enabled (selector: '.thing-content.comments')
wp-ajaxify-comments.js?ver=1.7.1:87 [WP Ajaxify Comments] Initialization completed

And here is me double-checking that it can successfully find the Post Container:

>> $(".thing-content.comments")
0: div#post-2839.entry-content.thing-content.clickable.comments.
1: div#post-3002.entry-content.thing-content.clickable.comments.
2: div#post-3018.entry-content.thing-content.clickable.comments.
3: div#post-3120.entry-content.thing-content.clickable.comments.
4: div#post-2825.entry-content.thing-content.clickable.comments.
5: div#post-3028.entry-content.thing-content.clickable.comments.
6: div#post-3049.entry-content.thing-content.clickable.comments.
7: div#post-3078.entry-content.thing-content.clickable.comments.
8: div#post-3111.entry-content.thing-content.clickable.comments.
9: div#post-2998.entry-content.thing-content.clickable.comments.
10: div#post-2864.entry-content.thing-content.clickable.comments.
11: div#post-2880.entry-content.thing-content.clickable.comments.
12: div#post-3107.entry-content.thing-content.clickable.comments.
13: div#post-2872.entry-content.thing-content.clickable.comments.
14: div#post-2924.entry-content.thing-content.clickable.comments.
15: div#post-2823.entry-content.thing-content.clickable.comments.
16: div#post-2892.entry-content.thing-content.clickable.comments.
17: div#post-2878.entry-content.thing-content.clickable.comments.
18: div#post-3144.entry-content.thing-content.clickable.comments.
19: div#post-3124.entry-content.thing-content.clickable.comments.
20: div#post-2996.entry-content.thing-content.clickable.comments.
21: div#post-2900.entry-content.thing-content.clickable.comments.
22: div#post-3138.entry-content.thing-content.clickable.comments.
23: div#post-3122.entry-content.thing-content.clickable.comments.
24: div#post-2894.entry-content.thing-content.clickable.comments.
25: div#post-2896.entry-content.thing-content.clickable.comments.
26: div#post-2884.entry-content.thing-content.clickable.comments.
27: div#post-2902.entry-content.thing-content.clickable.comments.
28: div#post-2898.entry-content.thing-content.clickable.comments.
29: div#post-2876.entry-content.thing-content.clickable.comments.
30: div#post-3101.entry-content.thing-content.clickable.comments.
31: div#post-3006.entry-content.thing-content.clickable.comments.
32: div#post-3115.entry-content.thing-content.clickable.comments.
33: div#post-2870.entry-content.thing-content.clickable.comments.
34: div#post-3000.entry-content.thing-content.clickable.comments.
35: div#post-2994.entry-content.thing-content.clickable.comments.
36: div#post-3128.entry-content.thing-content.clickable.comments.
37: div#post-2886.entry-content.thing-content.clickable.comments.
38: div#post-3126.entry-content.thing-content.clickable.comments.
39: div#post-3109.entry-content.thing-content.clickable.comments.
40: div#post-3103.entry-content.thing-content.clickable.comments.
41: div#post-3011.entry-content.thing-content.clickable.comments.
42: div#post-2882.entry-content.thing-content.clickable.comments.
43: div#post-2888.entry-content.thing-content.clickable.comments.
44: div#post-3014.entry-content.thing-content.clickable.comments.
45: div#post-3095.entry-content.thing-content.clickable.comments.
46: div#post-2630.entry-content.thing-content.clickable.comments.
47: div#post-3009.entry-content.thing-content.clickable.comments.
48: div#post-3178.entry-content.thing-content.clickable.comments.
49: div#post-2874.entry-content.thing-content.clickable.comments.
50: div#post-2836.entry-content.thing-content.clickable.comments.
51: div#post-3180.entry-content.thing-content.clickable.comments.
52: div#post-2866.entry-content.thing-content.clickable.comments.
53: div#post-3087.entry-content.thing-content.clickable.comments.
54: div#post-3093.entry-content.thing-content.clickable.comments.
55: div#post-3099.entry-content.thing-content.clickable.comments.
56: div#post-3089.entry-content.thing-content.clickable.comments.
57: div#post-3097.entry-content.thing-content.clickable.comments.
58: div#post-3184.entry-content.thing-content.clickable.animated.comments.
59: div#post-3186.entry-content.thing-content.clickable.comments.
60: div#post-3118.entry-content.thing-content.clickable.comments.
61: div#post-3105.entry-content.thing-content.clickable.comments.
62: div#post-2868.entry-content.thing-content.clickable.comments.
63: div#post-3076.entry-content.thing-content.clickable.comments.
64: div#post-3080.entry-content.thing-content.clickable.comments.
65: div#post-3085.entry-content.thing-content.clickable.comments.
66: div#post-3024.entry-content.thing-content.clickable.comments.
67: div#post-3113.entry-content.thing-content.clickable.comments.
length: 68
prevObject: S.fn.init [document]
__proto__: Object(0)

When it reloads the page, no errors are reported:

[WP Ajaxify Comments] Initializing version 1.7.1
wp-ajaxify-comments.js?ver=1.7.1:87 [WP Ajaxify Comments] Found jQuery 3.5.1
wp-ajaxify-comments.js?ver=1.7.1:87 [WP Ajaxify Comments] Found jQuery blockUI 2.7
wp-ajaxify-comments.js?ver=1.7.1:87 [WP Ajaxify Comments] Found jQuery Idle Timer plugin
wp-ajaxify-comments.js?ver=1.7.1:87 [WP Ajaxify Comments] Multiple comment form support enabled (selector: '.thing-content.comments')
wp-ajaxify-comments.js?ver=1.7.1:87 [WP Ajaxify Comments] Attach form...
wp-ajaxify-comments.js?ver=1.7.1:87 [WP Ajaxify Comments] Search comment form (selector: '#post-3028 #commentform')... Found: s.fn.init?[form#commentform.comment-form, prevObject: S.fn.init(1)]
wp-ajaxify-comments.js?ver=1.7.1:87 [WP Ajaxify Comments] Search comments container (selector: '#post-3028 #comments')... Found: s.fn.init?[div#comments.comments-area, prevObject: S.fn.init(1)]
wp-ajaxify-comments.js?ver=1.7.1:87 [WP Ajaxify Comments] Search respond container (selector: '#post-3028 #respond')... Found: s.fn.init?[div#respond.comment-respond, prevObject: S.fn.init(1)]
wp-ajaxify-comments.js?ver=1.7.1:87 [WP Ajaxify Comments] Search comment paging links (selector: '#post-3028 #comments [class^='nav-'] a')... Not found
wp-ajaxify-comments.js?ver=1.7.1:87 [WP Ajaxify Comments] Search comment links (selector: '#comments a[href*="/comment-page-"]')... Not found
wp-ajaxify-comments.js?ver=1.7.1:87 [WP Ajaxify Comments] Initialization completed

• This reply was modified 4 years, 1 month ago by Wes Modes.
• This reply was modified 4 years, 1 month ago by Wes Modes.
• This reply was modified 4 years, 1 month ago by Wes Modes.
• This reply was modified 4 years, 1 month ago by Wes Modes.

And here is me checking to see if I can successfully find the comments within the post containers:

>> $(".thing-content.comments #comments #commentform")
s.fn.init(68)?[form#commentform.comment-form, form#commentform.comment-form, form#commentform.comment-form, form#commentform.comment-form, form#commentform.comment-form, form#commentform.comment-form, form#commentform.comment-form, form#commentform.comment-form, form#commentform.comment-form, form#commentform.comment-form, form#commentform.comment-form, form#commentform.comment-form, form#commentform.comment-form, form#commentform.comment-form, form#commentform.comment-form, form#commentform.comment-form, form#commentform.comment-form, form#commentform.comment-form, form#commentform.comment-form, form#commentform.comment-form, form#commentform.comment-form, form#commentform.comment-form, form#commentform.comment-form, form#commentform.comment-form, form#commentform.comment-form, form#commentform.comment-form, form#commentform.comment-form, form#commentform.comment-form, form#commentform.comment-form, form#commentform.comment-form, form#commentform.comment-form, form#commentform.comment-form, form#commentform.comment-form, form#commentform.comment-form, form#commentform.comment-form, form#commentform.comment-form, form#commentform.comment-form, form#commentform.comment-form, form#commentform.comment-form, form#commentform.comment-form, form#commentform.comment-form, form#commentform.comment-form, form#commentform.comment-form, form#commentform.comment-form, form#commentform.comment-form, form#commentform.comment-form, form#commentform.comment-form, form#commentform.comment-form, form#commentform.comment-form, form#commentform.comment-form, form#commentform.comment-form, form#commentform.comment-form, form#commentform.comment-form, form#commentform.comment-form, form#commentform.comment-form, form#commentform.comment-form, form#commentform.comment-form, form#commentform.comment-form, form#commentform.comment-form, form#commentform.comment-form, form#commentform.comment-form, form#commentform.comment-form, form#commentform.comment-form, form#commentform.comment-form, form#commentform.comment-form, form#commentform.comment-form, form#commentform.comment-form, form#commentform.comment-form, prevObject: S.fn.init(1)]

• This reply was modified 4 years, 1 month ago by Wes Modes.

Jan,

I fixed it and I have a suggestion.

How I Fixed It

Since this page has multiple comment forms per page, the plugin requires a unique ID for the comment form (but not the comment form container). So I added a unique id for each comment form. Most WP themes set this by default to #commentform. I changed it to #commentform-1234, where 1234 is the ID of the post.

In the call to comment_form() inside comments.php for my theme, I added the following code:

<?php
	$comments_args = array(
			// Change the title of the reply section
			'title_reply' => __( 'Leave a Comment', 'textdomain' ),
			// Change the ID of the comment form from #commentform
			// to #commentform-1234, where 1234 is the ID of the post
			'id_form' => 'commentform-' . get_the_ID(),
	);
	comment_form( $comments_args ); // Render comments form.
?>

This generates HTML, something like:

<form action="https://unavoidabledisaster.com/wp-comments-post.php" method="post" id="commentform-2839" class="comment-form" novalidate="">
. . .
</form>

We can use the selector “.comment-form” to select the comment form from the plugin config, and the plugin will use the uqique ID to modify the post when you submit a comment.

My Suggestion

While the Post Container Selector setting is specific about needing a unique ID for multiple comments per page:

Selector that matches post containers to enable support for multiple comment forms per page; leave empty to disable multiple comment form per page support. Please note: Each post container needs to have the ID attribute defined.

The Comment Form setting does not have a similar warning. My suggestion is to add a similar warning to the Post Container setting.

If you like, I can submit that suggestion as a feature request issue.

Again, thanks for the help.

Wes

• This reply was modified 4 years, 1 month ago by Wes Modes.

Thanks @wmodes for the update. Great to hear that everything is working. We will update the description in the WP admin backend.

Hey @wmodes, short update: We updated the description in the most recent (developer) version 1.7.2 which is available here https://downloads.www.ads-software.com/plugin/wp-ajaxify-comments.zip.

By the way: Maybe you find the time and leave a short review here https://www.ads-software.com/support/plugin/wp-ajaxify-comments/reviews/ :). Thanks in advance!