#ajax-processed not added on a form inside a custom callback (MY_MODULE_deliver_html_page)

Question

Ok, a lot of things on the title so I'll try to explain everything on the question.

I'm trying to create a logic inside Drupal 7 to enable modal forms with AJAX.

This is the pipeline:

• Render a form with an #ajax callback in a modal (foundation reveal)
• Send a form via AJAX and receive Drupal ajax commands.

In order to print the form without the whole themed template I used a custom callback to render plain html.

$items['statusupdate/%statusupdate/delete'] = array(
        'title' => 'Delete',
        'page callback' => 'statusupdate_delete_confirm',
        'page arguments' => array(1),
        'access arguments' => array('delete statusupdates'),
        'weight' => 1,
        'type' => MENU_LOCAL_TASK,
        'context' => MENU_CONTEXT_INLINE,
        'delivery callback' => 'MY_MODULE_deliver_ajax_html_page',
    );

Attempt 1 - not working

function MY_MODULE_deliver_ajax_html_page($page_callback_result) {
    print $page_callback_result;
    return null;
}

Attempt 2 - Create a custom template to load javascript, not working (the logic is on the php side)

function MY_MODULE_deliver_ajax_html_page($page_callback_result) {
    print theme('page-ajax-html', array('page' => $page_callback_result, 'styles' =>'', 'scripts' =>drupal_get_js()));
    return null;
}

This works fine to render only the form in plain HTML but by doing so no ajax logic is applied to the form.

Drupal_render($form) renders the form, but is not adding #ajax-processed.

I tried to render the $form inside the page.tpl.php and AJAX works, so my guess is that rendering the $form in plain HTML some ajax preprocess logic.

Form:

function statusupdate_confirm_form($form, &$form_state, $data)
{
    $form['#id'] = 'statusupdate-confirm-form';

    $form['submit'] = array(
        '#type' => 'submit',

        '#value' => t('Delete'),
        "#ajax" => array(
            "callback" => "delete_statusupdate_callback",
            "effect" => "fade",
        ),
    );
    return $form;
}

Form rendering:

function statusupdate_delete_confirm($statusupdate) {
    $form = drupal_get_form('statusupdate_confirm_form', array());
    $form['submit'] = ajax_pre_render_element($form['submit']);
    $html = '<div class="">'.t('Careful').'!</div>';
    $html .= '<div class="">'.t('Are you sure you want to delete %status_id?', array('%status_id' => $statusupdate->status_id)).'</div>';
    $html .= '<a class="close-reveal-modal">&#215;</a>';
    $html .= drupal_render($form, '');
    return $html;
}

HTML Result

<form action="/statusupdate/12/delete" method="post" id="statusupdate-confirm-form" accept-charset="UTF-8"><div><input type="submit" id="edit-submit" name="op" value="Delete" class="form-submit"><input type="hidden" name="form_build_id" value="form-muOSqaoWicTDGYZ-IAp149QAmMpsOPKNsq8WXH2XSLI">
<input type="hidden" name="form_token" value="ckXsiTcF2_sINFfKdNj3uK6L9FiJv3krg1jnhKh0Vsk">
<input type="hidden" name="form_id" value="statusupdate_confirm_form">

Any idea?

Answer 1

The problem why the ajax is not working with loaded forms through ajax is because of the missing javascript behaviors attached to the form. These provides all client side code (and which adds the .ajax-processed class on the element).

To be able to add these needed behaviors, you need to make used of the ajax_pre_render_element and attaching these to the page. Also important, is that you print out the JS code by calling drupal_get_js().

This is how I managed to get it working.

function YOURMODULE_form($form, &$form_state)
{   
    // Same form build as your example
    $form = array();

    $form['#id'] = 'statusupdate-confirm-form';
    $form['submit'] = array(
        '#type' => 'submit',
        '#value' => t('Delete'),
        "#ajax" => array(
            "callback" => 'delete_statusupdate_callback',
            "effect" => "fade",
        ),
    );

    return $form;
}

// Menu callback used to only how the form (standalone) without the theme HTML
function YOURMODULE_page()
{
    // Get the form
    $form = drupal_get_form('YOURMODULE_form');

    // Process the submit button which uses ajax
    $form['submit'] = ajax_pre_render_element($form['submit']);

    // Build renderable array
    $build = array(
        'form' => $form,
        '#attached' => $form['submit']['#attached'], // This will attach all needed JS behaviors onto the page
    );

    // Print $form
    print drupal_render($build);

    // Print JS
    print drupal_get_js();

    return null;
}