1

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?

  • If I understand correctly, you are showing a form in a modal window (which is loaded through ajax), in that form you are using ajax submit handlers which are not called / working ? – Mike Vranckx Jan 4 '14 at 11:08
  • When I render the form inside the Modal window (via ajax) it's not adding the .ajax-processed class to the input[type="submit"]. If I include the same code to page.tpl.php it does. – Xavi Colomer Jan 4 '14 at 15:24
4
+50

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

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.