How to emulate all the AJAX functionality when the form is rendered after an AJAX callback?

Question

I have a Drupal form, but I am adding it to the page as the result of an AJAX callback.

I need this form to trigger a new callback. My code below:

      $form['#suffix'] = '<div id="form-return-message-box">this is the return box</div>';
  $form['#attached']['js'] = array('misc/ajax.js');

  $form['markup'] = array(
    '#type' => 'markup',
    '#markup' => '<h2>This is a form</h2>'
  );


  $form['button'] = array(
    '#type' => 'button',
    '#value' => t('Submit'),
    '#ajax' => array(
      'callback' => 'module_myform_callback',
      'wrapper' => 'form-return-message-box',
      'method' => 'replace',
      'effect' => 'fade',
    ),
  );

  $replace_layer = '#somelayer';

  $commands = array();
  $commands[] = ajax_command_replace($replace_layer, drupal_render($form));
  $page = array(
    '#type' => 'ajax',
    '#commands' => $commands,
  );

  ajax_deliver($page);

So this is what happens: this form is being added into a container called 'somelayer' that already exists on the page (I didn't add that part of the code because I thought it would be unnecessary). It was called from a link with the class 'use-ajax'.

So the form renders on the page as desired after an AJAX callback triggered by the link. This part works allright.

But here is the (very) tricky part: I would also like to preserve the new form AJAX functionality (check the '#ajax' part of the array), which doesn't occur. After the form is rendered, the button won't trigger any AJAX code. By clicking on it, the page will refresh, not triggering the callback function (not added here to preserve space).

By looking into source code of a regular form page with AJAX, you will see code like this that enables the AJAX functionality:

"ajax":{"edit-something":{"callback":"module_formname_callback","wrapper":"wrapper-name","method":"replaceWith","effect":"fade","event":"change","url":"\/spabear\/system\/ajax" ...

By looking at the source code of the form added into my page, I can see there is no piece of <script></script> code that would trigger the AJAX callback in my dynamically loaded form. How can I emulate all the AJAX functionality when the form is rendered after an AJAX callback?

Answer 1

The #ajax['wrapper'] property includes the HTML ID of a page section that should be replaced (or altered in some other way). The #ajax['callback'] tells the Form system what callback should be called after the Ajax call happens and the form is rebuilt.

https://www.drupal.org/docs/7/api/javascript-api/ajax-forms-in-drupal-7

Answer 2

Try adding a 'prevent' => 'click' to your #ajax. This will prevent the form from submitting and refreshing the page. After that, it should be a little easier to debug the problem.

    $form['button'] = array(
      '#type' => 'button',
      '#value' => t('Submit'),
      '#ajax' => array(
        'callback' => 'module_myform_callback',
        'wrapper' => 'form-return-message-box',
        'method' => 'replace',
        'effect' => 'fade',
        'prevent' => 'click',
      ),
    );

Answer 3

Check that your your form has the proper library attached. So when it is being loaded into a page, it will ensure those libraries are avaibable for its defined behaviors.

I assume according to your original question that your are on D7 :

  $form['#attached']['library'][] = array('system', 'drupal.ajax');
  $form['#attached']['library'][] = array('system', 'jquery.form');

Im not sure with your code example, but you should also try as much as possible to decompose responsibilities. You should have one function to generate your form, one function to submit your form, one function to load and send your form through ajax, etc...