Is there a way to re-invoke #ajax on forms when the form itself is returned with ajax?

Question

I want to change the delete link on comments so that the delete confirmation is returned with Ajax and then the delete confirmation is executed with Ajax.

I have fixed the form so the delete confirmation at /comment/%cid/delete so now the submit action is performed with ajax.

Here is the code I used to accomplish this:

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

  // Add the Ajax Submit Function
  $form['actions']['submit']['#ajax'] = array(
    'callback' => 'awesomesite_comments_ajax_delete',
    'progress' => false,
  );

}

function awesomesite_comments_ajax_delete($form, $form_state) {

  // Get rid of all of the messages that have been set
  drupal_get_messages();

  // Get the comment & node objects
  $comment = $form_state['comment'];

  // Put all of the Ajax Commands into an array
  $commands = array();

  // Place the comment above the form
  $commands[] = ajax_command_remove('#comment-'.$comment->cid.', comment-'.$comment->cid.' + .comment');

  // Return the Ajax Commands Array
  return array('#type' => 'ajax', '#commands' => $commands);

 }

This works perfectly on the delete confirmation page, however, when I return the form with Ajax, the submit no longer is processed with Ajax and a standard page refresh takes place.

Here is the PHP code I have to for delivering the confirmation form via Ajax:

function awesomesite_comments_menu_alter(&$items) {
  $items['comment/%/delete/ajax'] = $items['comment/%/delete'];
  $items['comment/%/delete/ajax']['delivery callback'] = 'ajax_deliver';
  $items['comment/%/delete/ajax']['page callback'] = 'awesomesite_comments_ajax_confirm_delete_page';
}

function awesomesite_comments_ajax_confirm_delete_page($cid) {

  // Get the HTML of the detele page.
  $data = drupal_render(comment_confirm_delete_page($cid));

  // Put all of the Ajax Commands into an array
  $commands = array();

  // Replace the HTML
  $commands[] = ajax_command_html('#comment-'.$cid.' + .comment', $data, array('effect' => 'fade'));

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

}

And here is the Javascript I have for taking the "Delete" link on the comments and returning the form (from the callback above)

jQuery('a.ajax-link:not(.ajax-processed)').addClass('ajax-processed').each(function() {

        // Cret the element settings object
        var element_settings = {};

        // Get rid of the progress
        element_settings.progress = { 'type' : 'none' };

        // setup the click elements and add the href
        if (jQuery(this).attr('href')) {
            element_settings.url = jQuery(this).attr('href');
            element_settings.event = 'click';
        }

        element_settings.effect = 'fade';

        // Get the base
        var base = jQuery(this).attr('id');

        // Register the Ajax Request with Drupal
        Drupal.ajax[base] = new Drupal.ajax(base, this, element_settings);

    });

I believe what is happening is that Drupal is processing all the forms on the page for #ajax when the page is loaded, however, since the form is loaded via AJAX it isn't setting up the #ajax information (which I can confirm is present). How can you force Drupal to check for new forms after an Ajax request? Or am I missing something?

any help would be greatly appreciated!

Answer 1

I found the answer!

I simply was asking the wrong question. What I needed to do was re-attach the drupal behaviors with Drupal.attachBehaviors().

I added this code to my JavaScript code.

jQuery('.ajax-processed').once().ajaxSuccess(function() {
    Drupal.attachBehaviors();
});

Voilà! Everything works as it should.

Answer 2

To make things a bit more clear, for beginners like me, use it in this way:

(function($)  {

    $(document).ready(function(){

        ..the JS code here..

    });

jQuery('.ajax-processed').once().ajaxSuccess(function() {
    Drupal.attachBehaviors();
});

})(jQuery);

Clive and David, thank you SO much

Answer 3

I'd built a number of ajax forms before running into a problem like this, it was strange some ajax worked and other parts just didn't.

The answer I discovered after digging deep into ajax.js and the data structures returned by ajax calls was that ajax.js seemed to be dependent on one of two conditions. Either your fapi ['#ajax'] enabled elements must be without any 'id' information, or they must provide both a fapi ['#id'] and a fapi ['#attributes']['id'].

Hopefully, for anyone running into this type of problem, can add this to the checklist to be sure.