Ajax is not working for Drupal comments form

Question

I have created two content types slideshow and slides. I am assigning slides to slideshow with the help of node references. One slideshow can contain n number of slides. When I am showing slideshow I am using ajax to show the slides on the slideshow page there are two buttons one is Previous and second one is Next so that user can navigate to the next or previous slides and user can comment on slides means while navigating to the slides user can comment on slides. I have altered the comment form with the help of hook_form_alter so that page get not refreshed at the time when user comments on the form( I am using ajax api for this ). Everything is working for the first slide means ajax is working fine for the first slide and page is not getting refreshed and for the other slides it is not working. There is one more problem when I was on the second slide and clicks on the previous slide first slide will be displayed and on this page when submits the comment page is getting refreshed.

I searched on the google and other forums I am getting some information related to the Drupal.attachBehaviors() function but I dont know how to use this function.

function lcl_ajax_comment_form_alter(&$form, &$form_state, $form_id) {
   if ($form_id == 'comment_node_article_form') {
     $form['actions']['submit']['#ajax'] = array(
      'callback' => 'lcl_ajax_comment_callback',
      'wrapper' => $form['#id'],
     );
   }
 }
function lcl_ajax_comment_callback($form, $form_state) {
  // Return the actual form if it contains errors.
  if (form_get_errors()) {
    return $form;
  }
  lcl_comments_remove_status($_SESSION);
  $comment = $form_state['comment'];
  $node = $form['#node'];
  $comment_build = comment_view($comment, $node);
  $notify_text = variable_get('lcl_ajax_comments_notify', '') ? theme('lcl_ajax_comments_notify_text') : '';
  // Append comment to root comment wrapper.
  $comment_output = drupal_render($comment_build);
  $commands[] = ajax_command_append('#comment-wrapper', $notify_text . $comment_output);

  // echo "<pre>"; print_r($form_state['values']); echo "</pre>";exit;
  $node = $form['#node'];
  $new_form_state = array();
  $new_form_state['build_info']['args'][] = (object) array('nid' => $node->nid);
  // Don't pull from cache.
  $new_form_state['input'] = array();
  $new_form_build = drupal_build_form($form['#form_id'], $new_form_state);
  $new_form_output = drupal_render($new_form_build);

  $commands[] = ajax_command_replace('#' . $form['#id'], $new_form_output);
  // $commands[] = ajax_command_replace('#comments', $new_form_output);

  return array('#type' => 'ajax', '#commands' => $commands);
}

Answer 1

I had a similar issue with ajax pagination provided by views. I was equalising the heights of the columns using javascript but it was only working on the first page. Any columns loaded via ajax weren't having equal heights calculated. The solution to my problem was to stop using jQuery's once plugin in my behaviour. This was making it execute only once but I needed it to execute infinitely.

Usually a behaviour looks like this:

Drupal.behaviors.ajax = {
    attach: function(context, settings) {
      $('.your-target-element', context).once('ajax', function(){
       var $this = $(this); 
       // do stuff with $this
      });
    }
  }

But you want to drop the once plugin like this:

Drupal.behaviors.ajax = {
    attach: function(context, settings) {
       // do stuff
    }
  }