Ajax is broken in forms built within an Ajax callback

Anyone have a workaround for this in the meantime?

Thanks Joegl for your summary and reporting the issue.

Faced the similar issue. I overwrite the ajax settings url and query parameters in buildform(). Now it is working fine.

 $form['actions']['next'] = [
   '#type' => 'submit',
   '#value' => $this->t('Submit'),
   '#ajax' => [
     'callback' => '::ajaxSubmitForm',
     'event' => 'click',
     'url' => Url::fromRoute('custom.route_name'),
     'options' => ['query' => ['ajax_form' => 1]],
    ],
  ];

mukila's comment #11 also fixed the issue that I was having. Thanks!

I've tried the workaround supplied by #11, it seems to change the URL, so it no longer sends double _wrapper_format, but it still doesn't run the callback. I simply get the rendered page I put into the URL (which in my case is the current), which results in an AjaxError, because it's not able to parse the callback.

Anyone else encountered this, and found a fix?

Just encountered this today, and while changing the URL fixes the URL, it will not run the callback unless that URL is actually a URL where you have your form.

So what solved it for me was creating a route for the form, and changing the URL to that URL.

I strongly believe this can be simply fixed - my path to fixing it personally was taking a look at core\lib\Drupal\Core\Render\MainContent\AjaxRenderer.php - specifically line 63.
I just added

$response->setAttachments($rendered_content['#attached']);

So in your case, you'd probably need to call setAttachments() in your clickMyCheckbox() function.

I also saw #2504115: AJAX forms should submit to $form['#action'] instead of <current> and there were some more recent comments made there that hint on how to solve it. Thanks to those I have managed to make it work without having to use a custom Ajax command.

My use case is that I should show a popup after a user joins a group to invite the user to subscribe to the group's newsletter. This is very similar to the use case in the issue summary. I also need to open a second form in the ajax callback of the submit button of the first form.

My first form (I am leaving out the non-relevant things like validate and submit handlers, documentation etc):

<?php

declare(strict_types = 1);

namespace Drupal\collection\Form;

use Drupal\Core\Ajax\AjaxResponse;
use Drupal\Core\Ajax\OpenModalDialogCommand;
use Drupal\Core\Ajax\PrependCommand;
use Drupal\Core\Ajax\ReplaceCommand;
use Drupal\Core\Form\FormBase;
use Drupal\Core\Form\FormBuilderInterface;
use Drupal\Core\Form\FormStateInterface;
use Drupal\Core\Url;
use Symfony\Component\DependencyInjection\ContainerInterface;

class JoinGroupForm extends FormBase {

  protected $formBuilder;

  public function __construct(FormBuilderInterface $form_builder) {
    $this->formBuilder = $form_builder;
  }

  public static function create(ContainerInterface $container): JoinGroupForm {
    return new static(
      $container->get('form_builder')
    );
  }

  public function getFormId(): string {
    return 'join_group_form';
  }

  public function buildForm(array $form, FormStateInterface $form_state): array {
    $membership = $this->getGroupMembership();
    if (empty($membership)) {
      $form['join'] = [
        '#ajax' => [
          'callback' => '::showSubscribeDialog',
        ],
        '#type' => 'submit',
        '#value' => $this->t('Join this group'),
      ];
    }
    else {
      $form['leave'] = [
        '#type' => 'link',
        '#title' => $this->t('Leave this group'),
        '#url' => Url::fromRoute('group.leave_form'),
      ];
    }

    return $form;
  }

  public function showSubscribeDialog(array &$form, FormStateInterface $form_state): AjaxResponse {
    $response = new AjaxResponse();

    // Output messages in the page.
    $messages = ['#type' => 'status_messages'];
    $response->addCommand(new PrependCommand('.section--content-top', $messages));

    // If the form submitted successfully, make an offer the user cannot refuse.
    if (!$form_state->getErrors()) {
      // Rebuild the form and replace it in the page, so that the "Join this
      // "group" button will be replaced with the "Leave this group" link.
      $rebuilt_form = $this->formBuilder->rebuildForm('join_group_form', $form_state, $form);
      $response->addCommand(new ReplaceCommand('#join-group-form', $rebuilt_form));

      // Open the second form in a modal dialog.
      $title = $this->t('Welcome to the group!');

      $modal_form = $this->formBuilder->getForm('\Drupal\collection\Form\SubscribeToGroupForm');
      $modal_form['#attached']['library'][] = 'core/drupal.dialog.ajax';

      $response->addCommand(new OpenModalDialogCommand($title, $modal_form, ['width' => '500']));
    }
    return $response;
  }

}

The second form, this includes the key to make it work, we need to specify the AJAX URL to use, and manually specify that the AJAX_FORM_REQUEST needs to be passed in the query arguments:

<?php

declare(strict_types = 1);

namespace Drupal\collection\Form;

use Drupal\Core\Ajax\AjaxResponse;
use Drupal\Core\Ajax\CloseModalDialogCommand;
use Drupal\Core\Ajax\PrependCommand;
use Drupal\Core\Form\FormBase;
use Drupal\Core\Form\FormBuilderInterface;
use Drupal\Core\Form\FormStateInterface;
use Drupal\Core\Url;

class SubscribeToGroupForm extends FormBase {

  public function getFormId(): string {
    return 'subscribe_to_group_form';
  }

  public function buildForm(array $form, FormStateInterface $form_state): array {
    $form['description'] = [
      '#type' => 'html_tag',
      '#tag' => 'p',
      '#value' => $this->t('Do you want to receive our weekly newsletter?'),
    ];
    $form['actions'] = [
      '#type' => 'actions',
    ];
    $form['actions']['cancel'] = [
      '#type' => 'submit',
      '#value' => $this->t('No thanks'),
      '#attributes' => [
        'class' => ['dialog-cancel'],
      ],
    ];

    // The trick to making it work lies here. We need to specify the callback,
    // the URL to the form route, and set AJAX_FORM_REQUEST in the query.
    $form['actions']['confirm'] = [
      '#type' => 'submit',
      '#value' => $this->t('Subscribe'),
      '#ajax' => [
        'callback' => [static::class, 'confirmSubscription'],
        'url' => Url::fromRoute('collection.subscribe_to_group_form'),
        'options' => [
          'query' => [
            FormBuilderInterface::AJAX_FORM_REQUEST => TRUE,
          ],
        ],
      ],
    ];

    return $form;
  }

  public function confirmSubscription(array &$form, FormStateInterface $form_state): AjaxResponse {
    $response = new AjaxResponse();

    // Output messages in the page.
    $messages = ['#type' => 'status_messages'];
    $response->addCommand(new PrependCommand('.section--content-top', $messages));

    if (!$form_state->getErrors()) {
      $response->addCommand(new CloseModalDialogCommand());
    }
    return $response;
  }

}

And the second form also needs its own route that the AJAX callback can call. From my module.routing.yml:

collection.subscribe_to_group_form:
  path: '/ajax/group/subscribe'
  defaults:
    _form: \Drupal\collection\Form\SubscribeToGroupForm

I am not sure if this is a bug or something that needs to be documented.

Good Work on #20. I was having exact same issue. Fixed it.

I've tried a number of the suggestions herein but still can't seem to get AJAX on a form loaded in a modal to work.

A couple of things are a little different in my setup to these, however.
Firstly, I'm using a hook_form_alter to add an extra button to an entity form to open up a modal.
Secondly, the modal itself will have an entity form, not just a regular form.

/**
 * Implements hook_form_alter().
 */
function mymodule_form_alter(&$form, FormStateInterface $form_state, $form_id) {
  // Do some stuff here... 
  $form['add_field'] = [
    '#type' => 'submit',
    '#value' => t('Add Field'),
    '#attributes' => [
      'class' => [
        'use-ajax',
      ],
    ],
    '#ajax' => [
      'callback' => 'mymodule_entity_form_add',
      'event' => 'click',
      'url' => Url::fromRoute('mymodule.creation_form', [
        'entity_type' => $entity->getEntityTypeId(),
        'entity_bundle' => $entity->bundle(),
      ]),
      'options' => [
        'query' => [
          FormBuilderInterface::AJAX_FORM_REQUEST => TRUE,
        ],
      ],
    ],
  ];
}

I have my #ajax callback function like so:

/**
 * AJAX Form Callback: My Module Entity Form.
 */
function mymodule_entity_form_add(&$form, FormStateInterface $form_state) {
  // Do some stuff...
  $response = new AjaxResponse();
  $modal_form = \Drupal::service('entity.form_builder')->getForm($entity, 'add');
  $response->addCommand(new OpenModalDialogCommand('Add Field', $modal_form, ['width' => '800']));
  return $response;
}

I have my route:

# AJAX Field creation form
mymodule.creation_form:
  path: '/ajax/mymodule/creation/{entity_type}/{entity_bundle}'
  defaults:
    _title: 'Create Field'
    _controller: '\Drupal\mymodule\Controller\MyModuleController::ajaxCreationForm'
  requirements:
    _permission: 'administer mymodule'

And my ajaxCreationForm function on MyModuleController:

namespace Drupal\mymodule\Controller;

use Drupal\Core\Ajax\AjaxResponse;
use Drupal\Core\Ajax\OpenModalDialogCommand;
use Drupal\Core\Controller\ControllerBase;
use Drupal\Core\DependencyInjection\ContainerInjectionInterface;
use Drupal\Core\Entity\EntityFormBuilder;
use Symfony\Component\DependencyInjection\ContainerInterface;

/**
 * The MyModuleController class.
 */
class MyModuleController extends ControllerBase implements ContainerInjectionInterface {

  /**
   * The form builder.
   *
   * @var \Drupal\Core\Entity\EntityFormBuilder
   */
  protected $formBuilder;

  /**
   * Constructs a MyModuleController object.
   *
   * @param \Drupal\Core\Entity\EntityFormBuilder $formBuilder
   *   The form builder.
   */
  public function __construct(EntityFormBuilder $formBuilder) {
    $this->formBuilder = $formBuilder;
  }

  /**
   * {@inheritdoc}
   */
  public static function create(ContainerInterface $container) {
    return new static(
      $container->get('entity.form_builder')
    );
  }

 /**
   * Gets the creation form in a modal.
   * 
   * @param string $entity_type
   *   The entity type.
   * @param string $entity_bundle
   *   The entity bundle.
   *
   * @return \Drupal\Core\Ajax\AjaxResponse
   *   Returns an ajax response.
   */
  public function ajaxCreationForm($entity_type = NULL , $entity_bundle = NULL) {
    // Do some stuff...

    $response = new AjaxResponse();
    $modal_form = $this->formBuilder->getForm($entity, 'add');
    $response->addCommand(new OpenModalDialogCommand('Add Field', $modal_form, ['width' => '800']));
    return $response;
  }

And the entity form that is loaded into the modal has AJAX to detect changes to the value of several select elements, and will populate other selects based on the response from the AJAX. Like so:

/**
   * {@inheritdoc}
   */
  public function form(array $form, FormStateInterface $form_state) {
    $form = parent::form($form, $form_state);
    // Do some stuff...
    $form['source']['entity_type'] = [
      '#type' => 'select',
      '#title' => $this->t('Entity Type'),
      '#options' => $entity_types,
      '#required' => TRUE,
      '#default_value' => $field->entityType(),
      '#ajax' => [
        'callback' => [$this, 'updateFieldOptions'],
        'event' => 'change',
        'options' => ['query' => ['ajax_form' => 1]],
        'progress' => [
          'type' => 'throbber',
          'message' => $this->t('Fetching options...'),
        ],
      ],
    ];

    $form['source']['entity_bundle'] = [
      '#type' => 'select',
      '#title' => $this->t('Entity Bundle'),
      '#options' => $entity_bundles,
      '#required' => TRUE,
      '#default_value' => $field->entityBundle(),
      '#ajax' => [
        'callback' => [$this, 'updateFieldOptions'],
        'event' => 'change',
        'options' => ['query' => ['ajax_form' => 1]],
        'progress' => [
          'type' => 'throbber',
          'message' => $this->t('Fetching options...'),
        ],
      ],
      '#states' => [
        'visible' => [
          'select[name="source_entity_type"]' => ['!value' => ''],
        ],
      ],
    ];
 }

 /**
   * AJAX Callback: Update Field Options.
   */
  public function updateFieldOptions(array &$form, FormStateInterface $form_state) {
    $response = new AjaxResponse;
    $response->addCommand(new ReplaceCommand('#field-add-form--wrapper', $form));
    return $response;
  }

This works absolutely fine when the entity form is not displayed in a modal. But when it is, this is the sort of request I see:

https://mysite.ddev.site:8989/ajax/mymodule/creation/node/page?ajax_form=1&_wrapper_format=drupal_ajax&_wrapper_format=drupal_ajax

I've read a bunch of other related issues regarding the bleeding of the _wrapper_format into links within a modal, and I've tried the workarounds I've seen in this thread, but so far no dice.

Any ideas?

> I am not sure if this is a bug or something that needs to be documented.

I'd say every blind copying of query parameters to links (actually there are quite some in the source) is a bug in itself. Views does it because it has no simple way to query a whitelist of "its" query parameters.

Just here to confirm we've hit this too on a 8.7.7 / Commerce 2.x setup.

Work #20, thanks @pfrenssen!

Work #20

#20 worked, thanks, but I had 2 things I had to consier:

It says to add the route that directs to the form. However, when I do as described, I got a 403 error on my ajax call and a access denied page from Drupal upon visiting the path specified in the route (/ajax/group/subscribe)

But I fixed that by adding the following lines to my routing.yml file:

  requirements: 
    _permission: 'access content'

Also, the final ajax call on the ajax generated modal form that I've tried calling (but it failed, which lead me here) needs to be a static function. So that would be the "confirmSubscription" method in the example provided.

public static function confirmSubscription(array &$form, FormStateInterface $form_state)

Finally, the parameters in the build method of the form that points to this route have to spelled exactly right:
public function buildForm(array $form, FormStateInterface $form_state)
I had $formstate which caused it to not work at all.

This was more complicated than neccessary, but it finally works! :)

I've run into a similar problem using drupal_commerce

I want users to be able to update their cart via ajax, so things like item quantity etc... The commerce cart is a view with form fields.

It works the first time 'update cart' is used. Not the second :(

function mymodule_module_form_alter(&$form, $form_state, $form_id) {
  if (isset($form_state->getBuildInfo()['base_form_id'])
    && ($form_state->getBuildInfo()['base_form_id'] == 'views_form_commerce_cart_form_default' || $form_state->getBuildInfo()['base_form_id'] == 'views_form_commerce_cart_form_block_1' )
    && $form['actions']['submit']['#update_cart'] == TRUE)
  {
    $form['actions']['submit']['#ajax'] = [
      'callback' => 'mymodule_module_ajax_update_cart',
      'url' => Url::fromRoute('commerce_cart.page'),
      'options' => [
        'query' => [
          FormBuilderInterface::AJAX_FORM_REQUEST => TRUE,
        ],
      ],
    ];
    $form['actions']['submit']['#ajax']['disable-refocus'] = TRUE;
  }
}

function mymodule_module_ajax_update_cart(array &$form, FormStateInterface $form_state) {
  $order_storage = \Drupal::entityTypeManager()->getStorage('commerce_order');
  /** @var \Drupal\commerce_order\Entity\OrderInterface $order */

  $triggering_element = $form_state->getTriggeringElement();
  $order = $order_storage->load($triggering_element["#order_id"]);

  $view = \Drupal\views\Views::getView('commerce_cart_form');
  $view->setDisplay('block_1');
  $view->setArguments([$order->id()]);

  $view->preview();

  $content = $view->buildRenderable();

  $response = new AjaxResponse();
  $response->addCommand(new ReplaceCommand('.views-element-container > div', $content));
  $response->addAttachments($content['#attached']);

  return $response;

Any suggestions welcome

Any updates on this? i tried #20, #31 on Drupal 9.1 and still cant get a ajax form submit handler to execute when rendered into a modal after opening the modal through an initial form (form 1) submit. Using simple forms with no special logic on the submit handlers just trying to close the dialog modal on the second form.

Getting this ajax error:

BEGIN OUTPUT from \u0027core\/themes\/classy\/templates\/misc\/status-messages.html.twig\u0027 --\u003E\n\u003Cdiv data-drupal-messages\u003E\n    \u003Cdiv role=\u0022contentinfo\u0022 aria-label=\u0022Error message\u0022 class=\u0022messages messages--error\u0022\u003E\n          \u003Cdiv role=\u0022alert\u0022\u003E\n                  \u003Ch2 class=\u0022visually-hidden\u0022\u003EError message\u003C\/h2\u003E\n                    \u003Cul class=\u0022messages__list\u0022\u003E\n                      \u003Cli class=\u0022messages__item\u0022\u003EThe form has become outdated. Press the back button, copy any unsaved work in the form, and then reload the page.\u003C\/li\u003E\n                      \u003Cli class=\u0022messages__item\u0022\u003EAn unrecoverable error occurred. The uploaded file likely exceeded the maximum file size (512 MB) that this server supports.\u003C\/li\u003E\n                  \u003C\/ul\u003E\n                \u003C\/div\u003E\n      \u003C\/div\u003E\n    \u003C\/div\u003E\n\n\u003C!-- END OUTPUT

Any help is really appreciated. Thanks!

Thanks, #20 helped me too.

Still an issue in 9.3, but thanks to the excellent explanation in #20 there is a work-around.

#20 works, thank you for that.

Thanks,
Sadashiv.