1

I did some manipulation (with JavaScript and CSS) on my comment form. It works good. Then I needed to install the Ajax Comments module because I don't want visitors to go another page while replying a comment.

My customization on the comment form doesn't work after enabling the Ajax Comments module.

This is the custom code that works without Ajax Comments:

function mytheme_form_alter(&$form, &$form_state, $form_id) {

      if($form_id == 'comment_node_blog_form') {
        $form['comment_body']['#weight'] = -100;
        $form['#attached']['js'][] = drupal_get_path('theme', 'mytheme') . '/js/jquery.validationEngine-en.js';
        $form['#attached']['js'][] = drupal_get_path('theme', 'mytheme') . '/js/jquery.validationEngine.js';
        $form['#attached']['js'][] = drupal_get_path('theme', 'mytheme') . '/js/scripts.js';
      }
    }


And this is the JavaScript code:

(function ($) {
    $(document).ready(function(){
        $("#comment-form").validationEngine();
        $('#comment-form').find('.form-type-textfield').hide();
        $('#edit-comment-body').click(function() {
                $('#comment-form').find('.form-type-textfield').slideDown();
        });     
    });
})(jQuery);

I tried the code above with behavior format but it also didn't work.


How can I make this code work with Ajax Comments?

  • 1
    What does "my custom code" do? That's the important bit I think – Clive Aug 19 '15 at 14:01
  • "some manipulation" - what manipulation was it? Probably this is important, too. – Mołot Aug 19 '15 at 14:03
  • I didn't add the code because didn't want the readers to lose focus but you're right. Added the code. Thanks. – herci Aug 19 '15 at 14:06
  • It might or might not matter, but my guess would be that you should wrap your JavaScript code into behavior to make it compatible with Drupal's AJAX implementation. If it will turn out that it was all what you needed, comment at me and I'll make it an answer. Or post a self-answer. If it will not help, at least edit your question to show you have tried and what it changed. – Mołot Aug 19 '15 at 14:18
  • @Mołot, I couldn't convert the JavaScript code into behavior. I read the page you gave and some other examples but it doesn't work. It doesn't work without the Ajax Comments module. I mean the conversion I made isn't correct. Could you please help me on this? Thanks – herci Aug 19 '15 at 14:53
2

AJAX Comments replaces the core comment form with its own version, so #comment-form is the wrong selector. It'll be something more like #ajax-comments-reply-form-751661-0-0. The numbers break down as [node-id]-[parent-comment-id]-[ajax-iterator]. The parent comment ID comes into play when you're replying to an existing comment.

Because the module uses the core AJAX API, that ID will also change for the new form that appears after a new comment is posted, so using an ID for your jQuery selector isn't a good option.

Without knowing exactly how your markup looks some of this is guess work, but the code to grab a reference to the comment form will look something like this:

var $commentForm = $('#main-body-selector').find('.ajax-comments-form-add');

EDIT: The Ajax Comments module adds an ajax-comments-form-reply class to all reply forms and adds an ajax-comments-form-add class to all comment add forms.

So, instead of #comment-form you should use ajax-comments-form-add and/or ajax-comments-form-reply to effect the comment form.

(function ($) {
Drupal.behaviors.comment = {
  attach: function (context, settings) {
        $(".ajax-comments-form-reply").validationEngine();
        $('.ajax-comments-form-reply').find('.form-type-textfield').hide();
        $('.text-full').click(function() {
                $('.ajax-comments-form-reply').find('.form-type-textfield').slideDown();
        }); 

        $(".ajax-comments-form-add").validationEngine();
        $('.ajax-comments-form-add').find('.form-type-textfield').hide();
        $('.text-full').click(function() {
                $('.ajax-comments-form-add').find('.form-type-textfield').slideDown();
        }); 

  }
};
}(jQuery));
  • Thanks a lot. Yes, you're right, I missed the #comment-form part. And the selector works as you said, for example one of the comment form selector is that #ajax-comments-reply-form-3-9-0. I won't use the ID selector, using class (.ajax-comments-form-reply) selector would solve the problem. I'm testing now and will share the results. – herci Aug 20 '15 at 9:02

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.