How can I make form_alter work with Ajax Comments?

Question

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?

Answer 1

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));